ChartJS:x軸の目盛りの最大表示数と表示角度を設定する

harada 228views 更新:2017年6月14日

ChartJSでグラフを作成して、X軸の値の数が多い場合、自動で斜めに表示されます。
これをまっすぐのまま表示したい場合オプション設定で以下のように指定します。

var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      scales: {
        xAxes: [{
          ticks: {
            maxRotation: 0,
            minRotation: 0
          }
        }]
      }
    }
  });

また、目盛りの最大表示数と、幅を小さくした場合に自動で表示数を減らす(autoSkip)かどうかは以下のようにオプション設定します。

var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      scales: {
        xAxes: [{
          ticks: {
            autoSkip: true,
            maxTicksLimit: 20 //値の最大表示数
          }
        }]
      }
    }
  });

参考:Limit labels number on Chart.js line chart
Make x label horizontal in ChartJS

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません