Chart.jsで作成したグラフをレスポンシブ対応させる方法 | オフィスナナフクChart.jsの＜canvas＞サイズのアスペクト比ルール まずChart.jsの表示サイズのルールを知っておきます。 グラフが描画される<canvas>要素サイズのデフォルト設定は次のようになっています。 ・アスペクト比：横 : 縦 = 2 : 1 ・横サイズ：親要素の横幅に準ずる（width=”100%”なイメージ） ・縦サイズ：常に横幅の半分になり指定できない（最低150px確保される） ・<canvas>要素内に記述した width=”◯◯” と height=”◯◯” はピクセル指定ではなく「比率」になる Chart.js固定アスペクト比イメージ 上記の場合、横サイズは親要素の幅、縦サイズは横サイズと同じになります（1:1）。 画面幅が変わっても常に1：1の比率が保たれます。 width=”100″ height=”300″ にすると、常に縦サイズが横サイズの３倍（1:3）にな
