Where do I apply width when using dataviewjs

[sdanna]

I have this block in a note and it works just fine:

const pages = dv.pages("#2022/W45 and #notes/habit").sort(x => x.file.name);
const labelNames = pages.map(p => {
	var month = p.date.month;
	var day = p.date.day;
	return month + "-" + day;
});
const weights = pages.map(p => p.weight).values;
  
const chartData = {  
	type: 'line',  
	data: {
  		labels: labelNames,
  		datasets: [{
    			label: 'Weights',
    			data: weights,
    			borderColor: 'rgb(75, 192, 192)',
    			tension: 0.1,
    			spanGaps: true    			
  		}]
	}
};
  
window.renderChart(chartData, this.container);  

I've tried to figure out where to apply the width modifier, but I've thus far been unsuccessful. Is it possible to apply the modifier when using dataviewjs?

[yiek888]

Hi @sdanna , I just went through figuring out how to set the width for my chart in dataviewjs today. I had to read the source to find this function: https://github.com/phibr0/obsidian-charts/blob/5ee3f5c2c51b72f9e9c4071ae2a8a57442b93314/src/chartRenderer.ts#L188

To satisfy the data.chartOptions check, I added the following in place of the last line:

const data = {
	chartOptions: chartData,
	width: "900px",
}

window.renderChart(data, this.container);

[teqdeq]

Hi, ist there also a chance to set the height of the Chart? If i have my Chart on the Fullscreen Dashboard, it is just taking way too much space. I tried this, but it's not working.

const data = {
	chartOptions: chartData,
	width: "900px",
	height: "900px",       
}

window.renderChart(data, this.container);

Thanks a lot Jan