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