Examples of changing a chart size on click

[czf]

I'm using charts and would like to be able to change the ratio programmatically but it seems like any changes to the ratio are ignored and only the first setting is used.

[stsrki]

Can you show us the code how you use charts?

[czf]

This seems to get the size to update

setOptions: (canvasId, options, optionsJsonString, optionsObject) => {
        if (optionsJsonString) {
            options = JSON.parse(optionsJsonString);
        }
        else if (optionsObject) {
            options = optionsObject;
        }

        const chart = window.blazoriseCharts.getChart(canvasId);

        if (chart) {
            chart.options.aspectRatio = .1;
            chart.aspectRatio = .1;
            chart.update();
            chart.resize();
        }
        
    },

[stsrki]

So it works only if options are set directly, following with update() and resize() calls?

[czf]

Oh this is only as far as I got last night. I wanted to find one case I could get working and now work backwards when I have more time to spend on it.

I think there's something funky with the way the aspectRatio is set. This code looks like it will handle the options update for aspect ratio:

if (chart) {
            chart.options = options;            
            chart.aspectRatio = options.aspectRatio ?? chart.aspectRatio;
            chart.update();
            chart.resize();
        }

When I was running this in the debugger I noticed that the chart itself had an aspectRatio property in addition to the aspectRatio property in options. Looks like the property inside options is ignored after initialization and the property on chart is what needs updating.

[czf]

and now that I knew what to look for I was able to find this SO post mentioning the same thing:
https://stackoverflow.com/a/58816740

[stsrki]

Basically, it is a bug in ChartJS. Not sure do I try to add new API to be able to change this or just leave it as it is. You can always work around it with a little JSInterop and custom JavaScript code.