How to fix size of mixed chart with bubble chart in Chart.js?

Question

I'm implementing a graph that is a mixture of bubble and bar graphs using Chart.js 3.7.0.

To prevent the canvas from resizing, I saved the size value in the canvas tag and modified the option value as follows. That is, we want the canvas to have fixed size.

HTML tag

<canvas id="mixed_graph_canvas" width="1320" height="685"></canvas>

options

options : {
   responsive : false,
   maintainAspectRation : false
}

However, if you modify the values y, r of the bubble chart, the canvas size changes as follows.

When the values in the bubble chart are 0, 0, 20

...
{
   x : 0,
   y : 0,
   z : 20
}

When the values in the bubble chart are 0, 80, 50

... 
{
   x : 0,
   y : 80,
   r : 50
}

Here is the full source code for drawing the above chart.

const chartData = {
        labels   : [
            '', 
            '0,0~49,10',
            '0,50~74,10',
            '0,75~99,10',
            '0,100~124,10',
            '0,125~149,10',
            '0,150~174,10',
            '0,175~199,10',
            '0,200~229,10',
            '0,230,10',
            ''
        ],
        datasets : [
            {
                type            : 'bar',
                label           : '',
                data            : [0, 50, 50, 50, 50, 50, 50, 50, 50, 50, 0],
                backgroundColor : 'rgba(241, 246, 0, 1)',
                borderColor     : 'rgba(241, 246, 0, 1)',
                borderWidth     : 0.1,
                barPercentage   : 0.05,
                order           : 1
            },
            {
                type : 'bubble',
                data : [
                    {   
                        x : 0,
                        y : 0,
                        r : 0
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 50,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 0
                    }
                ],
                backgroundColor : 'rgba(148, 181, 115, 0.7)',
                borderColor     : 'rgba(228, 248, 188, 0.92)',
                order           : 2
            }
        ]
    };

    const chartConfig = {
        type    : 'bar',
        data    : chartData,
        options : {
            responsive          : false,
            maintainAspectRatio : false,
            plugins             : {
                legend          : {
                    display : false
                },
                chartAreaBorder : {
                    borderColor : 'rgba(255, 255, 255, 0.2)',
                    borderWidth : 2
                },
                tooltip         : {
                    titleFont     : {
                        size : 24
                    },
                    bodyFont      : {
                        size : 14
                    },
                    footerFont    : {
                        size : 0
                    },
                    titleAlign    : 'center',
                    bodyAlign     : 'left',
                    borderColor   : 'rgba(119, 119, 119, 0.9)',
                    borderWidth   : 1,
                    displayColors : false,
                    filter        : function(tooltipItem) {
                        return tooltipItem.datasetIndex === 0;
                    },
                    callbacks     : {
                        title : function(tooltipItem) {
                            let percentage = tooltipItem[0].label.split(',');

                            return percentage[0] + '%';
                        },
                        label : function(tooltipItem) {
                            let percentage = tooltipItem.label.split(',');
                            let distance   = percentage[1];

                            return `Distance ${distance}m`;
                        },
                        afterLabel : function(tooltipItem) {
                            let percentage = tooltipItem.label.split(',');
                            let targetSize = percentage[2];

                            return `Target     ${targetSize}m`;
                        }
                    }
                }
            },
            scales              : {
                x  : {
                    display  : false,
                    position : 'bottom',
                    max      : 100,
                    min      : 0,
                    ticks    : {
                        beginAtZero : true,
                        stepSize    : 10,
                        callback    : () => ('')
                    },
                    grid     : {
                        drawTicks   : false,
                        color       : 'rgba(255, 255, 255, 0.2)',
                        borderWidth : 2
                    }
                },
                y  : {
                    position : 'left',
                    max      : 100,
                    min      : 0,
                    ticks : {
                        display     : false,
                        stepSize    : 5,
                        beginAtZero : true,
                        callback    : () => ('')
                    },
                    grid  : {
                        color            : 'rgba(255, 255, 255, 0.2)',
                        drawTicks        : false,
                        drawBorder       : true,
                        borderDash       : [5, 5],
                        borderDashOffset : 2,
                        borderWidth      : 2,
                        lineWidth        : context => context.index % 5 ? 1 : 0
                    }
                },
                y2 : {
                    max   : 100,
                    min   : 0,
                    ticks : {
                        display  : false,
                        stepSize : 25
                    },
                    grid  : {
                        drawTicks  : false,
                        drawBorder : false,
                        color      : 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            interaction         : {
                mode            : 'index',
                position        : 'custom',
                xAlign          : 'center',
                yAlign          : 'bottom',
                backgroundColor : 'rgba(85, 85, 85, 0.9)'
            },
            datasets            : {
                bubble : {
                    responsive          : false,
                    maintainAspectRatio : false,
                    elements  : {
                        point : {
                            radius : function(context) {
                                const size = context.chart.width;
                                const base = Math.abs(context.raw.v) / 1000;

                                return (size / 24) * base;
                            }
                        }
                    },
                    animation : {
                        easing   : 'linear',
                        duration : 1000,
                        x : {
                            from : true
                        }
                    }
                }
            }
        },
        plugins : [chartAreaBorder]
    };

    const distanceAccuracyMixedChart = new Chart(context, chartConfig);

How can I modify the canvas to have a fixed canvas size even if the bubble value changes or the bar value changes?

Even if the values in the data set change, I want the canvas to be drawn with fixed values of 1320px wide and 685px vertical.

Answer 1

If wrapping the canvas in a div can't solve it, or if the responsive option doesn't work, then the following options may give you the desired result.

options : {
  responsive : false,
  maintainAspectRatio : false,
  layout : {
    autoPadding : false
  }
}

Answer 2

The following chart options seem to be a good approach.

options : {
   responsive : false,
   maintainAspectRation : false,
   ...
}

Further you can try to include the canvas in a div element and omit width and height on the canvas.

<div class="chart-container">
  <canvas id="mixed_graph_canvas"></canvas>
</div>

Then you need to define the following CSS.

.chart-container {
  width: 1320px;
  height: 685px;  
}

#mixed_graph_canvas {
  width: 100%;
  height: 100%;
}