【JavaScript】Chart.jsでラベルを表示させたい！

自分用のメモとして記事を作成しました。

ラベル表示で悩んでいる方にもお役に立てたらと思います！

今回は下のようなグラフを作成します。

別の記事で、Chart.jsが表示されない件についても記事にしているので、お困りの方はご参照ください！

書き方
1. HTMLで、プラグイン用のファイルを読み込む
2. JavaScript書き方
おわりに

書き方

HTMLで、プラグイン用のファイルを読み込む

chartjs-plugin-datalabels というプラグインがあるのでそれを使います。

npmから読み込む、CDNで読み込むなどといった方法がありますが、私は今回GitHubからダウンロードして使いました。

ファイルから読み込むためのコードをHTML内に記述します。

Chart.js本体のコードの下に記述するようにします。

JavaScript書き方

ここで重要なのが、plugins: [ChartDataLabels] を記入すること！

私はこれの記述が不足しており、かなり時間を無駄にしました。

myPieChart = new Chart(ctx, {
      type: "pie", // 円グラフを使用
      data: {
        labels: ["覚醒", "夢"],
        datasets: [
          {
            backgroundColor: ["#f1d326", "#2daed9"],
            data: [awakePercent, sleepPercent],
          },
        ],
      },
      plugins: [ChartDataLabels],
      options: {
        responsive: true,
        maintainAspectRatio: true, // アスペクト比を維持
        plugins: {
          datalabels: {
            color: "#000",
            font: {
              weight: "bold",
              size: 20,
            },
            formatter: (value, context) => {
              // context.chart.data.labelsからラベルを取得
              const label = context.chart.data.labels[context.dataIndex];
              // ラベルとパーセンテージを返す
              return label + "\n" + value.toFixed(1) + "%";
            },
            // ラベルの表示位置を調整（オプション）
            anchor: "center",
            align: "center",
          },
        },
      },
    });

options の中に「plugins:」を入力しているので「なんで？」となりがちですが（私はそうでした。。）、

「あらかじめ chartjs-plugin-datalabels というプラグインを使いますよ！」と宣言しておかなくては、なんのこっちゃってなりますよねｗ