生活の跡

個人的な備忘録

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

概要

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

f:id:ishii-akihiro:20191021162750p:plain

これはひどい。

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

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
          }
        }]
      }
    }
  });

結果

f:id:ishii-akihiro:20191021163702p:plain

整いました。