[Bug]: DataView Integration - width modifier doesn't work

[ThomJ130]

Describe the bug

When I use the width modifier, it doesn't effect the graph when using a dataviewjs block.

Relevant errors (if available)

No response

Steps to reproduce

Just create a normal graph and use the width modifier, e.g. below

// counting how many instances of a given type of note there are

const chartData = {
    type: 'pie',
    data: {
        labels: types,
        datasets: [{
            label: 'Types',
            data: counts,
            backgroundColor: backgroundColors,
            borderColor: borderColors,
            borderWidth: 2
        }]
    },
    width: 0.1
}

window.renderChart(chartData, this.container);

Expected Behavior

By using a less-than-zero width, it should shrink the pie chart.

Additional context

No response

Code

const data = dv.pages('"1.references"')

let t_map = new Map()

for (const page of data) {
    // If the value is already in the map, increment the count; otherwise, set it to 1
    if (t_map[page.type]) {
        t_map[page.type]++;
    } else {
        t_map[page.type] = 1;
    }
}

const sorted_t_map = new Map(Object.entries(t_map).sort((a, b) => b[1] - a[1]));

let types = Array.from(sorted_t_map.keys())
let counts = Array.from(sorted_t_map.values())

let randomColors = []
let backgroundColors = []
let borderColors = []

types.forEach(
    t => randomColors.push(
        [
            Math.floor(Math.random()*(360 - 120) + 120),
            Math.floor(Math.random()*256),
            Math.floor(Math.random()*256)
        ]   
    )
)

randomColors.forEach(
    color => borderColors.push(
        `hsla(${color[0]}, 100%, 50%, 1)`       
    )
)

randomColors.forEach(
    color => backgroundColors.push(
        `hsla(${color[0]}, 100%, 50%, 0.2)`     
    )
)

const chartData = {
    type: 'pie',
    data: {
        labels: types,
        datasets: [{
            label: 'Types',
            data: counts,
            backgroundColor: backgroundColors,
            borderColor: borderColors,
            borderWidth: 2
        }]
    },
    width: 0.1
}

window.renderChart(chartData, this.container);

Operating system

Windows

[zhangyiy0223]

+1, for line charts with data view integration, tension modifier works, but many others (e.g., stacked, yMax) do not.

[oyes77]

+1, i just came here to ask if i was doing something wrong, seems it just doesn't work

[sector101010]

I solved my issue by looking up the correct syntax in the chart.js documentation, i.e. you need to use the options object, e.g.

        const chartData = {
            type: 'bar',
            data: {
                ...
            },
            options: {
                scales: {
                    y: {
                        min: 70,
                        max: 100,
                    }
                }
            },
        }

[viszzz]

I solved my issue by looking up the correct syntax in the chart.js documentation, i.e. you need to use the options object, e.g.

        const chartData = {
            type: 'bar',
            data: {
                ...
            },
            options: {
                scales: {
                    y: {
                        min: 70,
                        max: 100,
                    }
                }
            },
        }

You're a hero! I was missing a comma right after the options curly braces when creating horizontal bar graphs. Thanks for pointing it out because I was about to report a new bug.