Chart.js で縦幅を固定、横幅のみレスポンシブに対応する

JavaSCript のグラフ描画ライブラリの1つに、Chart.js がありよく使われています。

Chart.js は canvas 要素の上に描画します。

グラフ描画領域の縦横比（アスペクト比）は canvas の HTML に width と height で指定します。 これが表示サイズにもなります。

width と height を指定しないときのデフォルト値は width=300, height=150 です。

ブラウザの表示サイズに応じて、グラフの横幅を動的に変えたい場合があります。しかし canvas とレスポンシブの相性はなかなかやっかいな問題があります。canvas の幅を CSS で width: 100%; などと指定してもうまくいきません。ぼやけたりゆがんだりしてしまいます。

CSS で幅と高さを指定したつもりでも、それは HTML で幅と高さを指定するのとは意味が異なります。canvas 要素の描画領域は HTML で指定した値（指定していなければデフォルト値）のままであり、それが CSS でしていしたサイズに引き延ばされて表示されるだけだからです。

canvas の横幅を動的に指定する

canvas の表示サイズだけでなく描画領域のサイズも動的に変更するには、JavaScript を使って canvas 要素の width と height 属性の値をセットします。

このとき canvas に親要素を作っておきます。

親要素の幅と高さは CSS で指定しておきます。

画面の読み込み完了後に canvas の幅と高さの値を JavaScript でセットします。jQuery でやるのであれば、以下のようになります。

上の例では高さは 300px 固定として書いていますが、もちろんこちらも動的に変更することができます。

Chart.js のオプションを指定してレスポンシブにする

さて canvas のサイズを動的に変えるのであれば、ウィンドウをリサイズしたときに canvas の再描画をしないと不都合です。

Chart.js では optionsに responsive: true, を指定することで、自動的に対応してくれます。今回のように幅と高さの比率が動的に変化する場合は、maintainAspectRatio: false, も指定してやるとうまく行きます。

ITエンジニア募集中！

キュアコード株式会社はITエンジニアを募集しております。少人数の職場なので、上流・下流やサーバー・クライアント対応の垣根なく、あなたの強みを活かしながら いろいろなことにチャレンジ可能です。エンジニアとしての未経験の方、経験が少ない方も歓迎しています。

下記よりITエンジニア募集の採用情報をご覧いただけます。

キュアコード公式インスタグラム

キュアコード株式会社の新サービス情報や、オフィスライフの素敵な瞬間まで。私たちの日々の営みをご紹介します。