Chart.jsでグラフの高さが変わらない、親要素からはみ出す場合は、canvas自体に相対サイズを直接持たせるのではなく、専用の親コンテナで幅・高さを管理するのが基本です。Chart.jsは親コンテナのサイズ変化を見てcanvasをリサイズします。高さをコンテナに合わせて自由に変えたい場合は、optionsでresponsive:trueに加えてmaintainAspectRatio:falseを指定します。
まず専用コンテナでサイズを管理する
Chart.js公式ドキュメントでは、canvasの描画サイズとCSS上の表示サイズは別物であり、canvasへ相対的な高さ・幅を直接指定するだけでは期待どおりのリサイズにならない場合があると説明されています。グラフ専用の親要素を用意し、その要素のサイズをCSSで決めます。
.chart-container {
position: relative;
width: 100%;
height: 320px;
}
.chart-container canvas {
display: block;
}const config = {
type: 'line',
data,
options: {
responsive: true,
maintainAspectRatio: false
}
};
new Chart(document.getElementById('salesChart'), config);HTML側ではchart-containerの中にcanvasを1つ置きます。サイズ変更はcanvasの属性ではなく、まずコンテナ側を調整してください。
responsiveとmaintainAspectRatioの役割
| 設定 | 役割 | よく使う場面 |
|---|---|---|
| responsive: true | 親コンテナのサイズ変化に合わせてcanvasをリサイズ | 通常のレスポンシブ表示 |
| maintainAspectRatio: true | 元のアスペクト比を保つ | 縦横比を固定したい |
| maintainAspectRatio: false | 親コンテナの高さに追従しやすくする | 高さをCSSで自由に決めたい |
responsiveはChart.jsの既定値がtrue、maintainAspectRatioも既定値がtrueです。横幅は変わるのに高さが期待どおり変わらない場合は、アスペクト比を維持する設定が効いていないか確認してください。
用語解説：アスペクト比
幅と高さの比率です。maintainAspectRatioがtrueのとき、Chart.jsはリサイズ時にこの比率を維持しようとします。
高さを画面サイズに合わせたい場合
固定pxではなく画面高に応じて変えたい場合も、canvasではなく親コンテナへ相対値を指定します。
.chart-container {
position: relative;
width: 100%;
height: 40vh;
min-height: 240px;
max-height: 520px;
}このときもmaintainAspectRatio:falseが必要です。コンテナが専用でrelative positioningを持つことも確認してください。
ぼやける・縮み続けるときに確認する
- canvasへCSSの相対サイズを直接指定していないか
- canvasと親コンテナの両方で競合する高さ指定をしていないか
- グラフ専用コンテナがposition: relativeになっているか
- maintainAspectRatio:trueのまま高さだけを変更しようとしていないか
- 親コンテナ自体の幅・高さがレイアウト上0や極端な値になっていないか
Chart.jsの問題に見えても、親要素のFlexboxやGrid設定で高さが決まっていない場合があります。開発者ツールでchart-containerの実際のwidthとheightを先に確認すると切り分けやすくなります。
JavaScriptからサイズを変える場合
モーダルやダッシュボードのレイアウト変更など、実行時に親コンテナのサイズを変更する場合は、コンテナ変更後にChart.jsのresizeを使う方法もあります。
const container = chart.canvas.parentNode;
container.classList.add('chart-container--compact');
chart.resize();ただしCSSだけで親コンテナが自然にリサイズされ、Chart.jsが変更を検知できる構成なら、毎回手動でresizeを呼ぶ必要はありません。まずレイアウト側を安定させてください。
関連するChart.js・レスポンシブ設計
Chart.js自体の基本的な描画方法は入門記事、古い描画が残る問題はインスタンス管理の記事、ページ全体のレスポンシブ設計はCSSの記事がつながります。
（Chart.jsの基本的なグラフ描画については『Chart.jsでグラフを作成！HTMLに貼るだけで動くサンプルコード集』をご参照ください）
（描画が残る・重なる問題を直すについては『Chart.jsで描画が残る問題を3分で即解決！原因と対処』をご参照ください）
（CSSレスポンシブの基礎を確認するについては『初心者向けCSSレスポンシブ解説｜サンプル付きでスマホ対応をマスター』をご参照ください）
よくある疑問
responsive:trueだけでは高さを自由に変えられない？
maintainAspectRatioがtrueのままだと元の比率を維持するため、高さが期待どおりにならない場合があります。親コンテナで高さを決め、必要ならmaintainAspectRatio:falseにします。
canvasにheight:40vhを書けばよい？
Chart.js公式ではcanvasの表示サイズと描画サイズの違いから、canvasへ相対値を直接指定する方法は推奨されていません。専用の親コンテナ側でサイズを管理します。
グラフが親要素からはみ出すとき最初に見る場所は？
親コンテナの実際のwidthとheight、position、そしてChart.jsのresponsiveとmaintainAspectRatioを確認してください。
まとめ
Chart.jsのサイズ問題は、canvasではなく専用の親コンテナから確認すると整理しやすくなります。responsive:trueで親要素の変化へ追従させ、高さを自由に制御したい場合はmaintainAspectRatio:falseを組み合わせます。まず親コンテナの実サイズを確認し、canvasへの直接的な相対サイズ指定を減らしてください。
開発者ツールでChart.jsの親コンテナを選択し、実際のwidth・heightとmaintainAspectRatioの設定を確認してみてください。
