chart.js の レスポンシブ

chart.js レスポンシブ指定で描いたグラフが、ウィンドウのリサイズで canvas の縦横比での
リサイズがうまくいかなくてグラフが揺れるように振動してしまうことがある。
表示サイズ(canvas.style.width、canvas.style.height)に対して、
キャンバスのレンダリングサイズ(canvas.width、canvas.height)を相対値で表現することができないからだ。
Chart.js のオプション

名称	type	初期値	説明
responsive	boolean	true	コンテナをリサイズした時に、チャートのキャンバスをリサイズ
maintainAspectRatio	boolean	true	サイズ変更時のアスペクト比(幅/高さ)を維持するかどうかを指定します。
onResize	function	null	リサイズされた時に呼び出される関数、function(context, size) → size は、{width: 926, height: 300}の形式

解決するには、縦に対してはサイズ固定になるようにして、横のレスポンシブに対応させる。
maintainAspectRatio を false にして chart コンテキスト描画の後で、widh を % で指定、heightサイズ指定する。

<div>
   <canvas id="mychart"></canvas>
</div>

var mychart;
mychart = new Chart(document.getElementById("mychart").getContext("2d"), {
   type: 'line',
   data: {
      // label や datasets の記述
   },
   options: {
      responsive: true,
      maintainAspectRatio: false,
      // 各種設定の記述
   }
});
// 描画後
$('#mychart').css('width','100%');
$('#mychart').css('height','300px');