レスポンシブ・チャート

ウィンドウサイズに基づいてチャートサイズを変更する場合の大きな制約は、キャンバスディスプレイサイズ（canvas.style.widthと.height）とは対照的に、キャンバスレンダリングサイズ（canvas.widthと.height）は相対値で表現できないことです。さらに、これらのサイズは互いに独立しているので、キャンバスレンダリングサイズはディスプレイサイズに基づいて自動的に調整されず、レンダリングが不正確になります。

次の例は動作しません:

• <canvas height="40vh" width="80vw">: 無効な値です。キャンバスはサイズ変更されません。(example) (訳注: vh(viewport height)はビューポートの高さに対する割合。vw(viewport width)はビューポートの幅に対する割合。)
• <canvas style="height:40vh; width:80vw">: 無効な挙動になります。キャンバスサイズは変更されますが、ぼやけて表示されます。(example)

Chart.jsには、レスポンシブ機能を有効にしたり、キャンバスディスプレイサイズの変化を検出した際に行われるチャートサイズ変更動作を制御したり、それに応じてレンダリングサイズを更新したりするためのオプションが用意されています。

設定オプション

重要な注意点

キャンバスサイズ変更を、CANVAS要素から直接の検出することはできません。 キャンバスレンダリングサイズとディスプレイサイズを更新するために、Chart.jsでは親コンテナを使用します。ただしこの方法では、コンテナが相対配置(position:relative)されていることと、チャートキャンバスのみを含むことが必要です。これにより、コンテナサイズの相対値を設定することでレスポンシブ機能が実現できます。（example）

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

プログラムでコンテナサイズを変更することでも、チャートサイズを変更することができます。

chart.canvas.parentNode.style.height = '128px';

リサイズ可能なチャートの印刷

CSSメディアクエリ(訳注: @media (min-width: 700px){...} などのスタイルシートの適用範囲を制御する式)によって、ページ印刷時のスタイル変更が可能になります。そのメディアクエリで適用されるCSSによっては、チャートサイズを変更する必要が生じる場合がありますが、サイズ変更は自動的には行われません。 印刷時にチャートのサイズ変更をサポートするには、onbeforeprintイベントをフックし、各チャートのサイズ変更を手動でトリガする必要があります。

function beforePrintHandler () {
  for (var id in Chart.instances) {
    Chart.instances[id].resize()
  }
}