The canvas size keeps changing when using bubble charts in mixed charts. #10087

mycreatz · 2022-01-18T18:30:06Z

mycreatz
Jan 18, 2022

I am using a bar chart and a bubble chart as a mix chart.

If you change the y, r values of the bubble chart, the existing canvas height will continue to change.

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

For example, if you have the above values, it will appear as below.

On the other hand, if it has the following values, it is changed to the following canvas size.

{
   x : 0,
   y : 0,
   r : 20
}

I wrote the following code to block canvas size resizing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <style>
        body { 
            background-color: black;
        }

        canvas {
            width : 100% !important;
            height : 100% !important;
        }

        .wrapper {
            width : 1320px;
            height : 685px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <canvas id="distance_accuracy_mixed_graph_canvas"></canvas>
    </div>
    <script>
    const canvas  = document.getElementById('distance_accuracy_mixed_graph_canvas');
    const context = canvas.getContext('2d');

    const chartAreaBorder = {
        id : 'chartAreaBorder',
        beforeDraw(chart, args, options) {
            const { ctx, chartArea : { left, top, width, height }} = chart;

            ctx.save();
            ctx.strokeStyle = options.borderColor;
            ctx.lineWidth   = options.borderWidth;

            ctx.setLineDash(options.borderDash || []);
            
            ctx.lineDashOffset = options.borderDashOffset;

            ctx.strokeRect(left, top, width, height);
            ctx.restore();
        }
    };

    Chart.Tooltip.positioners.custom = function(elements) {
        if(!elements.length) {
            return false;
        }

        let offset = -elements[1].element.options.radius - 5;
        let posX   = elements[0].element.x;
        let posY   = elements[0].element.y;

        return {
            x : posX,
            y : posY + offset
        }
    };

    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, 80, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                backgroundColor : 'rgba(241, 246, 0, 1)',
                borderColor     : 'rgba(241, 246, 0, 1)',
                borderWidth     : 0.1,
                barPercentage   : 0.05,
                order           : 1
            },
            {
                type  : 'bubble',
                label : '',
                data  : [
                    {   
                        x : 0,
                        y : 0,
                        r : 0
                    },
                    {   
                        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 : 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,
                clip            : 0
            }
        ]
    };

    const chartConfig = {
        type    : '',
        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,
                        beginAtZero : true
                    },
                    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 : {
                    animation : {
                        easing   : 'linear',
                        duration : 1000,
                        x : {
                            from : true
                        }
                    }
                }
            }
        },
        plugins : [chartAreaBorder]
    };

    const mixedChart= new Chart(context, chartConfig);
    </script>
</body>
</html>

How can I modify the code so that the width and height of the canvas can be fixed even when the values of each chart change?

Answered by kurkle

Jan 18, 2022

I think that is the autoPadding feature, that tries to ensure elements fir in the chart area. It can be disabled:
https://www.chartjs.org/docs/3.7.0/configuration/layout.html

View full answer

kurkle · 2022-01-18T18:46:22Z

kurkle
Jan 18, 2022
Maintainer

I think that is the autoPadding feature, that tries to ensure elements fir in the chart area. It can be disabled:
https://www.chartjs.org/docs/3.7.0/configuration/layout.html

1 reply

mycreatz Jan 18, 2022
Author

Thank you very much. Couldn't figure out a simple attribute. Thanks to you, a question that I had not been able to solve for a long time has been resolved.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The canvas size keeps changing when using bubble charts in mixed charts. #10087

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

The canvas size keeps changing when using bubble charts in mixed charts. #10087

mycreatz Jan 18, 2022

Replies: 1 comment · 1 reply

kurkle Jan 18, 2022 Maintainer

mycreatz Jan 18, 2022 Author

mycreatz
Jan 18, 2022

Replies: 1 comment 1 reply

kurkle
Jan 18, 2022
Maintainer

mycreatz Jan 18, 2022
Author