Responsive Charts

ウィンドウサイズに応じてチャートサイズを変更する場合、 表示サイズ(canvas.style.width、canvas.style.height)に対して、 キャンバスのレンダリングサイズ(canvas.width、canvas.height)を相対値で表現することができない、 という大きな制約があります。 さらに、これらのサイズは、それぞれが独立しているため、 レンダリングサイズが、表示サイズに基づいた自動調節が行われず、正確な結果になりません。

以下の例は動きません。

• <canvas height="40vh" width="80vw"> : 無効な値です。キャンバスはリサイズされません。(example)
• <canvas style="height:40vh; width:80vw"> : 無効な挙動です。キャンバスはリサイズされますが、ぼやけてしまいます。(example)

Chart.jsには、キャンバスの表示サイズが変更された時にチャートをレスポンシブにリサイズし、 それに応じてレンダリングサイズを更新するためのいくつかのオプションがあります。

オプション

重要な注意点

キャンバスの変更をcanvas要素から直接検出することはできません。 Chart.jsは親コンテナを使用してキャンバスをレンダリングし、表示サイズを更新します。 ただし、この方法ではコンテナを相対配置に指定し、 さらにチャートのキャンバス専用にする必要があります。 そして、コンテナサイズの相対値を指定することで、レスポンシブにすることができます。 (example)

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

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

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

上記のコードでチャートの高さを正しく変更するには、maintainAspectRatioをfalseにする必要があります。

リサイズしたチャートの印刷

CSSメディアクエリを使ってページを印刷時のスタイルを変更することができます。 メディアクエリで適用されたCSSはチャートのサイズ変更が必要になる場合があります。 しかし、サイズ変更は自動ではありません。 印刷時にチャートサイズの変更をサポートするにはonbeforeprintイベントをフックして、各チャートのリサイズをトリガーする必要があります。

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