Chart.jsでX軸のラベルが重なって読めないときは、まずoptions.scales.x.ticksを確認してください。autoSkipをtrueにして表示する目盛りを間引き、maxRotationで回転角度を調整できます。画面幅が狭い場合はmaxTicksLimitで表示数の上限も設定します。すべてのラベルを表示しようとしてautoSkipをfalseにすると、かえって重なりやすくなります。
x軸のラベルが重なる主な原因
ラベルの数が多い、文字列が長い、グラフの描画領域が狭い、といった条件が重なると横軸の表示が窮屈になります。Chart.jsには目盛りを自動で間引く仕組みがありますが、設定変更や軸タイプの違いで期待する表示にならないことがあります。
| 起きている現象 | 確認する設定・条件 | 考える対処 |
|---|---|---|
| ラベルが横に詰まる | ticks.autoSkip | 自動間引きを有効にする |
| 斜めに回転して読みにくい | ticks.maxRotation / minRotation | 許容角度を指定する |
| 項目数が多くて収まらない | ticks.maxTicksLimit | 表示する目盛り数を抑える |
| スマホだけ窮屈 | 親要素の幅、responsive | 画面幅に合わせて表示方針を変える |
| 商品名などが長い | ラベル自体の文字量 | 短縮や改行を検討する |
用語解説：ticks（目盛り）
Chart.jsの軸に表示する目盛りやラベルの設定領域です。X軸の設定は通常options.scales.x.ticksにまとめます。
autoSkipとmaxRotationの設定例
次はカテゴリ軸を持つ棒グラフで、X軸のラベルを水平に保ちながら必要に応じて間引く例です。Chart.jsが読み込まれ、salesChartというcanvas要素が存在する前提です。
const canvas = document.getElementById("salesChart");
new Chart(canvas, {
type: "bar",
data: {
labels: [
"東京本社", "大阪支社", "福岡支社",
"札幌支社", "名古屋支社", "仙台支社",
"横浜支社", "神戸支社"
],
datasets: [{
label: "件数",
data: [12, 9, 7, 5, 10, 4, 6, 8]
}]
},
options: {
responsive: true,
scales: {
x: {
type: "category",
ticks: {
autoSkip: true,
maxRotation: 0,
minRotation: 0,
maxTicksLimit: 6
}
}
}
}
});maxRotation:0とminRotation:0は水平表示に固定する指定です。回転しない代わりに、横幅が足りないときはautoSkipで一部のラベルを省略して読みやすくします。maxTicksLimitは表示する目盛り数の上限です。
公式設定一覧：https://www.chartjs.org/docs/latest/axes/cartesian/_common_ticks.html
ラベルを斜めに表示したい場合
数件のラベルを省略するより、多少回転させた方が読めるグラフもあります。その場合はmaxRotationで最大角度を指定します。
const xTicks = {
autoSkip: true,
minRotation: 0,
maxRotation: 45
};
// options.scales.x.ticks へ設定するmaxRotationは横方向の軸に適用される設定で、必要に応じて回転します。回転を指定したからといって、全ラベルが必ず表示されるわけではありません。実際の文字幅・ラベル数・グラフ幅で変わります。
autoSkip:falseで全表示すると何が起きるか
// 全目盛りを表示したい場合でも重なりに注意
const xTicks = {
autoSkip: false,
maxRotation: 0
};autoSkipをfalseにすると、Chart.jsが自動で間引く処理を行わなくなります。横幅が足りないグラフではラベルが重なりやすくなるため、特別な理由がなければtrueを基準にします。
全項目名の確認が重要な業務画面なら、グラフ外の表で全件を表示する、横スクロール領域を設ける、略称を使うなど、情報を失わないUIを併用する方法もあります。
callbackでラベルを短縮する方法
項目名が長い場合は、カテゴリ軸のticks.callbackで表示文字列を短縮できます。元のdata.labelsを上書きせず、軸表示だけを変える用途に向いています。
const shortenCategoryTicks = {
autoSkip: true,
maxRotation: 0,
callback: function(value) {
const label = this.getLabelForValue(value);
return label.length > 7 ? label.slice(0, 7) + "…" : label;
}
};
// options.scales.x.ticks = shortenCategoryTicksカテゴリ軸では内部の目盛り値がラベル配列のインデックスとして扱われます。単純にString(value)を返すと項目名ではなく番号になることがあるため、getLabelForValueで文字列を取得します。
省略された名称はツールチップや表などでも確認できるようにすると、情報が失われにくくなります。
改行ラベルとレスポンシブ表示
カテゴリ軸はラベルを文字列配列にすると複数行で表示できます。短い語に分割すると、回転せずに読めることがあります。
const labels = [
["東京", "本社"],
["大阪", "支社"],
["名古屋", "支社"]
];
// data.labels に labels を指定する複数行が増えるとグラフ本体の描画領域が狭くなることもあります。PCでは読めてもスマートフォンでは重なる場合があるため、実際の表示幅で確認してください。
responsive:trueでも親要素の幅が固定されている場合はticksだけでは改善しません。レイアウト自体も調整しましょう。
効かないときのチェックリスト
- 設定先がoptions.scales.x.ticksか。y軸など別軸へ指定していないか。
- X軸がcategory・timeなどどの軸タイプか。カテゴリ軸のラベル処理を別の軸へ流用していないか。
- autoSkip:falseにしていないか。
- maxRotationとminRotationが意図した組み合わせか。
- 描画し直す際に古いChartインスタンスが残っていないか。
- 幅の狭い親コンテナやcanvasサイズが原因ではないか。
目盛りラベルの重なりとcanvas全体のサイズ問題は別々に切り分けます。幅が確保できなければ、間引きや短縮など表示情報の整理が必要です。
関連するChart.jsとCSSの記事
Chart.jsの基本データやoptionsの指定は入門記事で確認できます。PCとスマートフォンの幅に応じた表示設計は、レスポンシブCSSの記事も参考になります。
（Chart.jsの基本的なグラフ設定については『Chart.jsでグラフを作成！HTMLに貼るだけで動くサンプルコード集』をご参照ください）
（画面幅に応じたレイアウトについては『初心者向けCSSレスポンシブ解説｜2025年対応・サンプル付きでスマホ対応をマスター』をご参照ください）
よくある質問とまとめ
maxRotationを0にすれば必ず直りますか？
いいえ。水平表示になる一方、ラベルが多ければ幅が不足します。autoSkipやmaxTicksLimitと組み合わせます。
autoSkipの初期値は？
Chart.jsの共通Cartesian Axis設定ではtrueです。設定が上書きされていないか確認してください。
ラベルをすべて表示したい場合は？
グラフ幅を広げる、横スクロールを使う、略称化や複数行化、表の併用などを検討します。autoSkip:falseだけでは可読性を確保できません。
Chart.jsの軸ラベルが重なる場合は、まずoptions.scales.x.ticksのautoSkip、maxRotation、maxTicksLimitを確認します。根本原因がラベル数や画面幅なら、短縮表示とレスポンシブ設計も見直してください。
現在のグラフでautoSkip:trueを明示し、回転角と目盛り数の上限を変えて読みやすさを比較してみましょう。
