Laravel chart.js グラフが小さくなる

Question

Laravel chart.jsの棒グラフが小さくなる

LaravelでWebアプリ作成中です。

ボタンを押すとグラフが更新されるように作りたいのですが、更新した際グラフは変わりますが、ラベルが小さくなります。
グラフの左上に更新前のグラフが残ってしまいます。
CSSに問題があるのでしょうか。
onCalの場所に問題があるのでしょうか。

<div class="chartWrapper" style="position: relative; margin-top:30px;">
            <div class="chartContainer" style="height:400px;">
                <canvas id="myChart" style="display: block; height:400px; position: absolute;"></canvas>
            </div>
        </div>

        <button onclick="back()">前の月</button>
        <button onclick="next()">次の月</button>

var data = {
            data1: [10,20,30,40,50,60,60,50,40,30,20,10,],
            data2: [60,50,40,30,20,10,10,20,30,40,50,60,],
            data3: [10,10,20,20,30,30,40,40,50,50,60,60,],
        };

        var dataresult = data.data2;
        onCal();

        function back(){
           dataresult = data.data1;
           onCal();
        }
        function next(){
            dataresult = data.data3;
            onCal();
        }

        function onCal(){
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['１月', '２月', '３月', '４月', '５月', '６月', '７月','8月','9月','10月','11月','12月'],
                    datasets: [
                        {
                            label: '赤',
                            data: dataresult,
                            backgroundColor: 'rgb(255,0,0,0.9)',
                            borderColor: 'rgb(255,0,0,0.9)'
                        },
                        {
                            label: '青',
                            data: dataresult,
                            backgroundColor: 'rgb(0,128,255,1)',
                            borderColor: 'rgb(0,128,255,1)'
                        }
                    ]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                min: 0,
                                fontSize: 18, 
                            },

                        }],
                        xAxes: [{
                            ticks: {
                                fontSize: 18,
                            },
                        }],
                    },
                },
            });
        }

おまけ

canvasを中央寄せしたいです。

Answer 1

自己解決しました！
グラフ更新時にメモリが小さくなる問題は、下記のように変更することで解決しました。

responsive: false,
↓
responsive: true,

---

また、グラフ更新時に前のグラフが画面上に残ってしまう問題は、onCal()直下に下記を入れることで解決しました。
.destroy() ですでに生成しているchartインスタンスを破棄する。だとか、、、

if (chart) {
    chart.destroy();
}