Chart.js 2 と chartjs-plugin-datalabels を使って積み上げ棒グラフに各値を表示 / Twin Turbo Computing

はじめに

前回の「Chart.js 2 で積み上げ棒グラフを実装する方法」の続きです。

今日はそのグラフと chartjs-plugin-datalabels プラグインを使って、グラフ上に各値を表示する方法をご紹介します。

chartjs-plugin-datalabels: https://chartjs-plugin-datalabels.netlify.com/

Chart.js: 2.9.3

chartjs-plugin-datalabels: 0.7.0

目次

インストール
とりあえず実装
文字色の変更（個別）
文字色の変更（一括）
おわりに

1. インストール

公式サイトに様々なインストール方法が紹介されていますが、今回も GitHub からファイルを直接ダウンロードします。ダウンロードするファイルは chartjs-plugin-datalabels.min.js です。

Release Version 0.7.0 · chartjs/chartjs-plugin-datalabels · GitHub: https://github.com/chartjs/chartjs-plugin-datalabels/releases/tag/v0.7.0
Installation (chartjs-plugin-datalabels): https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#installation

2. とりあえず実装

導入自体はとても簡単です。下記のように chartjs-plugin-datalabels を読み込むだけで、グラフ上にラベルが表示されます。

下記例では index.html と同じフォルダに chartjs-plugin-datalabels.min.js などを配置しています。

前回の「Chart.js 2 で積み上げ棒グラフを実装する方法」で作成したコードを元に作っています。
Chart.js のダウンロード方法などはそちらをご覧ください。

/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Sample</title>
  <link rel="stylesheet" href="Chart.min.css">
  <script src="Chart.min.js"></script>
  <script src="chartjs-plugin-datalabels.min.js"></script> 
  <script src="sample.js"></script>
</head>
<body>
  <canvas id="myChart" width="640" height="360"></canvas>
</body>
</html>

/sample.js

window.onload = function () {
  const myCanvas = document.getElementById("myChart");
  new Chart(myCanvas, {
    type: "horizontalBar",
    data: {
      labels: ["Store 1", "Store 2", "Store 3"],
      datasets: [
        {
          label: "Orange",
          data: [3, 6, 9],
          backgroundColor: "#F6AD3C",
        },
        {
          label: "Grape",
          data: [12, 8, 4],
          backgroundColor: "#A64A97",
        },
        {
          label: "Melon",
          data: [2, 6, 4],
          backgroundColor: "#AACF52",
        },
      ]
    },
    options: {
      responsive: false,
      scales: {
        xAxes: [{
          stacked: true,
        }],
        yAxes: [{
          stacked: true
        }]
      },
    }
  });
}

これだけでラベルに値は表示されるのですが、背景色との組み合わせによっては見づらくなります。例えば、上記の実行結果では「Grape」の値が見づらく感じます。次にこのフォントカラーを変更する方法をご紹介します。

3. 文字色の変更（個別）

各項目のフォントカラーを個別に変更するには、下記のように指定します。

/sample.js

...
{
  label: "Grape",
  ...
  // ▼ 下記を追加
  datalabels: {
    labels: {
        value: {
            color: "#fff"
        }
    }
  }
},
...

下記公式ドキュメントで紹介されているサンプルコードでは下の方に記述されています。

Configuration (chartjs-plugin-datalabels): https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#configuration

3. 文字色の変更（一括）

フォントカラーを変更する方法として、下記のように実装する方法もあります。

先の例で追記した「label: "Grape"」の「datalabels」プロパティを削除して試してください。
試しに両方記述してみたところ datalabels プロパティの値が優先されました。

/sample.js

...
new Chart(myCanvas, {
  ...
  options: {
    // ▼ 下記を追加
    plugins: {
      datalabels: {
        color: function (context) {
          return (context.dataset.label === "Grape") ? "#fff" : "#000";
        }
      }
    },
    ...
  });
...

上記例では label: "Grape" の場合は白（#fff）、他は黒（#000）にしています。return の前に console.log(context); を挟めば、context にどんな値が入っているか把握することができ、様々な条件分岐の実装に役立てることができると思います。

4. おわりに

chartjs-plugin-datalabels を使うことで、とても簡単に、グラフ上に各値を表示することができました。またオプションも豊富で、文字色の変更なども自由自在です。

今回はフォントカラーの変更方法しかご紹介していませんが、その他については公式ドキュメントで紹介されていますので、ご確認ください。

Introduction | chartjs-plugin-datalabels: https://chartjs-plugin-datalabels.netlify.com/guide/

しかし、実は一番やりたかったのは各グラフの合計値をグラフ右側に表示することで、それは本プラグインで実装することはできないようです。

ちょっと調べたころ、自作されている方もいるようなので、僕もトライしてみようかなと思っています。