chartJSでレスポンシブ対応をするが、高さは固定したい

chartJSで、ブラウザのウィンドウを変更すると、高さが長くなる事象に遭遇した。

その時の話し。

確認した環境

• chartJS2.9.4

わかったこと

チャートの表示オプションに以下を設定していたのが、maintainAspectRatioをオフにしていることで、ウィンドウサイズが変わると、高さが広がってしまうようだった。

options: {
    responsive: true,
    maintainAspectRatio: false,
}   

responsive: true は、ウィンドウをリサイズした時にサイズの調整を自動でしてくれる設定（デフォルト値）
maintainAspectRatio: false は、サイズ変更時に、元のキャンバスのアスペクト比を維持しない設定

ただ、maintainAspectRatio: trueのまま、canvasタグにheight=”100″などを入力すると、高さの調整はできるのだが、100という数値がどこの高さを指示しているのかわからない。

高さだけを固定したいと思い、調べていったところ、

公式ドキュメントを見ると、親要素にスタイル指定をするのがよいとのこと。

https://www.chartjs.org/docs/2.9.4/general/responsive.html?h=height

まとめ

レスポンシブを考慮するが、高さは固定しておくには、以下の指定をすることで対応ができた。

<div style="position: relative; height:250px">
    <canvas ref="canvas" />
</div>

// チャートオプション設定
options: {
    responsive: true,
    maintainAspectRatio: false,
}