[Chart.js 4v]レスポンシブ対応とかcssでサイズ指定可能にする方法とか

そのままだとダメなやつ。

初期状態の確認

chart.jsで作ったグラフの基本動作。

ブラウザ幅を狭くすると幅に合わせて縮小される。だけど、幅を広くしてもグラフ領域は広くならない。

グラフの高さは自動で調整される。cssで<canvas>を指定しても無視される。

こんな感じにする

    const ctx = document.getElementById('myChart');
    const config = {
        ︙
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    }
    const myChart = new Chart(ctx, config);

optionsでresponsiveとmaintainAspectRatioを上記の感じに指定する。

とりあえず、何も考えずに仕込んでおけば幸せになることはあっても不幸にはならない感じがしてる。

cssで高さ指定ができるようになったけど、この状態で高さを指定しなければ初期状態と同じにchart.js側で自動で高さを振ってくれる。

嬉しいですね。