🚀

Chart.jsのグラフでラベルを改行する方法

2024/05/04に公開

Chart.js

改行

ラベル

tech

はじめに

この記事では、Chart.jsの棒グラフでx軸のラベルが長いテキストの場合の改行方法を紹介します。より見やすいグラフを作成するためのラベルの折り返し方法を解説します。

~~公式のドキュメントには載っていなかったのですが~~公式のYoutube動画で解説していました。
公式のドキュメントにも書いてありました。

In case you want multiline labels you can provide an array with each line as one entry in the array.
複数行のラベルが必要な場合は、各行を配列内の 1 つのエントリとして含む配列を提供できます。

Chart.js公式解説動画

本記事は上記の内容に基づいて、ラベルの改行方法を解説します。

基本的な設定と問題点

Chart.jsを使って基本的なグラフを作成します。
しかし、データの要素を示すラベルの文字が長い場合、適切に折り返されず1行で表示されます。
これにより、ラベルがグラフの領域を圧迫したり、キャンバスのサイズを超えてしまうことが問題となります。

改行するために\nを付与したり、ticksのcallbackを利用してvalueをスライスする方法などが見つかるのですが、いずれも目的にマッチしません。
前者は、\nを付与してもHTMLでは改行されないため、半角スペースの隙間ができるだけです。
後者は、ticksを用いるとラベルで指定した内容が上書きされてしまいます。

ラベルの改行方法

この問題の解決方法は、ラベルの配列に文字列を指定するところを、文字列の配列を指定します。
具体的には、以下。

2021年10月10日 月曜日

というラベルを、

2021年10月10日
月曜日

のように改行したい場合

通常、以下のようにラベルを設定するところを、

labels: [
  "2021年10月10日 月曜日",
  "2021年10月11日 火曜日"
]

下記のように、改行したい位置を配列の要素として区切ることで改行されます。

labels: [
  ["2021年10月10日", "月曜日"],
  ["2021年10月11日", "火曜日"]
]

ラベルがAPI等で取得する可変する任意の文字数で改行したい場合は、
下記のようにすればよいでしょう。

  // API等で取得したと仮定
  const labels = [
    "2021年10月10日 月曜日",
    "2021年10月11日 火曜日"
  ];
  // 6文字ごとに分割する
  const adjustLabels = labels.value.map((label) => {
    return label.length <= 6 ? [label] : label.match(/.{1,6}/g);
  });

    ...

  // Chart.jsのラベル設定
  labels: adjustLabels,
  data: ...

ツールチップのカスタマイズ

ラベルが改行され目的が達成され何よりですが、
ツールチップを用いている場合、ラベルを改行したことによって、表示されている内容がカンマ区切りの文字列となってしまいます。
※ツールチップの内容を特に指定しない場合、ラベルの値が表示されます。

この問題を解決するために、ラベルの改行対応に合わせてツールチップのカスタマイズも行います。
ツールチップのタイトルにラベルの値が設定されるため、callbacksを定義してカンマ区切りになってしまっている文字列からカンマを除去することで、表示テキストを整えます。

tooltips: {
  callbacks: {
    title: (tooltipItem) => {
      return tooltipItem[0]?.label?.replace(/,/g, '') || '';
    },
  }
}

サンプル

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Chart.js Sample</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    canvas {
      width: 50%;
      height: 50%;
    }
  </style>
</head>

<body>
  <div>
    <canvas id="myChart"></canvas>
  </div>
  <script src="script.js"></script>
</body>

</html>

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            ["2021年10月10日", "月曜日"],
            ["2021年10月11日", "火曜日"],
            ["2021年10月12日", "水曜日"]
        ],
        datasets: [{
            label: 'サンプルデータ',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                beginAtZero: true
            }
        },
        tooltips: {
            callbacks: {
                title: function(tooltipItems) {
                    return tooltipItems[0]?.label?.replace(/,/g, '');
                }
            }
        }
    }
});

まとめ

Chart.jsでのラベルを改行する方法は、ラベルの配列に配列をネストすることで実現可能。
この方法により、長いラベルも適切に表示することができ、ユーザーにとって読みやすいグラフを作成することが可能になります。