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