Chart.jsでグラフに表示する長いラベルを折り返して表示する

概要

Chart.jsで棒グラフを作ったらこんな感じになりました。

これはひどい。

ということで、ラベルの見栄えをよくするために、次の２点を施します。

1. 10文字を超えたら2行に分ける
2. 斜めではなく縦に表示する

環境

Chart.js 2.8.0

ひどい状態のソース

ラベルは categories に、データは facilities_count に格納しています。y軸は表示範囲を0〜10に指定していますが、x軸については何も指定していません。

  // canvas にグラフを表示（施設数）
var ctx = document.getElementById('count').getContext('2d');
var chart_line = new Chart(ctx, {
type: 'bar',
data: {
labels: categories,
datasets: [
{
label: '施設数',
data: facilities_count
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 10
}
}]
}
}
});

整えたソース

x軸のオプションを書き加えました。
maxRotation、minRotation を90度に固定することで縦に表示させます。こちらの記事の一撃必殺を適用しました。
Chart.js でX軸の軸ラベル(ticks)を「縦書き」にする一撃必殺技 – Qiita

また、teratail の回答で見つけたのですが、ラベルを配列にすると折り返して表示できるようです。
JavaScript – chart.js グラフの複数設置とラベルの改行、グラフの軸線の色を変更したい。｜teratail
今回は10文字を超えたら折り返したいので、callback関数を使っています。10文字を超える場合は[先頭10文字, それ以降]の配列とし、10文字以内ならそのまま出力します。

  var ctx = document.getElementById('count').getContext('2d');
var chart_line = new Chart(ctx, {
type: 'bar',
data: {
labels: categories,
datasets: [
{
label: '施設数',
data: facilities_count
}
]
},
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 90,
callback: function(val){
if(val.length > 10){
return [val.substr(0, 10), val.substr(10)]
}else{
return val;
}
}
}
}],
yAxes: [{
ticks: {
min: 0,
max: 10
}
}]
}
}
});

結果

整いました。