ぬまろぐ

←戻る

chart.jsで第2軸を追加する方法

2017/09/24

chart.jsでグラフの第2軸を表示する方法を紹介します。第2軸は下図のように複数のグラフを別々のスケールで表示するために使います(左側のスケールと右側のスケールの2つを使用)。これを使えるとグラフの表現が一気に向上します。

img

第二軸を表示するための方法

options->scalesのyAxes内に設定を2セット追加します。1つ目は1軸目なので特に特別なことはせず、2つ目に第2軸用の設定を行います。また、同様にdata->datasetsにもセットを2つ指定し、2つ目を第二軸のデータセットとします。具体的には以下のような設定で第二軸を利用できます。

  1. optionsのscalesのyAxesを2つ設定する ・2軸目にする方のpositionをrightに設定 ・2軸目にする方のyAxesのIDを設定する
  2. 第2軸を利用するグラフのデータセットのyAxisIDに1で設定したIDを指定する
chart = new Chart(ctx, {
 type: 'bar',
 data: {
  ...
  datasets: [{ //第2軸のデータセット
   ...
   yAxisID: "y-right" //第2軸のID指定
  },{ //第1軸のデータセット
   ... //ID指定なしの場合第1軸となる
  }]
 },
 options: {
  scales: {
   xAxes:[{
    ...
   }],
   yAxes: [{ //第1軸の軸設定
    ... //position指定なしで第1軸になる
   },
   { //第2軸の軸設定
    id: "y-right", //第2軸にするグラフにはこのIDを指定する
    position: "right", //第2軸(右側軸)になる
    ...
   }]
  }
 }
});