Chart.jsで作成した複合グラフのラベルの文字色を各々変更したい

実現したいこと

Chart.jsで作成した複合グラフのラベルの文字色を各々変更したい。

前提

html+cssでWEBサイト制作。

JSライブラリのChart.js、プラグインのchartjs-plugin-datalabelsを使用して、
棒グラフと折れ線グラフの複合グラフを作成しています。

Chart.js Ver3.0.0
chartjs-plugin-datalabels Ver2.0.0

発生している問題

chartjs-plugin-datalabelsで表示したラベルの文字色を、
棒グラフと折れグラフで変更したいです。

該当のソースコード

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div clsss="graph">
  <canvas id="wfchart"></canvas>
</div>

<script>
  const myChart = new Chart(
  document.getElementById( 'wfchart' ),
  {
    type: 'bar',
    data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [
      {
        type: 'line',
        label: '例１',
        data: [50,100,350,200,300],
        borderColor : "#666",
        pointBackgroundColor    : "rgba(23, 121, 189, 1)",
        fill: false,
        yAxisID: "Chart1",
      },
      {
        type: 'bar',
        label: '例2',
        data: [100,200,300,400,500],
        yAxisID: "Chart2",
        backgroundColor: "#444",
        barPercentage: 0.4,
      },
      ],
    },
    options: {
      responsive: true,
      scales: {
        x: {
          display: false
        },
        y: {
          type: "linear",
          min: 0,
          max: 500,
          ticks: {
            color: '#171717',
          },
          grid: {
            borderColor: "rbga(10,10,10,0.3)",
            borderWidth: 1,
            borderDash: [4, 1],
            borderDashOffset: 0.0,
            circular: false,
            display: true,
            drawBorder: true,
            drawOnChartArea: true,
            drawTicks: true,
            lineWidth: 1,
            offset: false,
            z: 0,
          },
        },
        Chart1: {
          position: 'right',
          type: "linear",
          min: 0,
          max: 500,
          ticks: {
            color: '#171717',
          },
          display: false,
        },
        Chart2: {
          type: "linear",
          display: false,
          position: 'right',
        },
      },
    plugins: {
      tooltip: {
            enabled: false
      },
      datalabels: {
          font: {
              size: 13,
          },
          formatter: function( value, context ) {
              return value.toString();
          }
      }
    }
    },
    plugins: [
        ChartDataLabels,
    ],
  }
);
</script>

試したこと

各data内のdatasets内のcolorを変更→変化なし

補足情報（FW/ツールのバージョンなど）

上記ソースコピペでそのまま動かせます。

chartjs、chartjs-plugin-datalabelsについて情報があまりないのと、
JS初学のため試せることが少なく申し訳ないです。
回答いただけると助かります。

hoshi-takanori

2023/12/16 00:11

> 各data内のdatasets内のcolorを変更→変化なし datasets の各要素に直接 color を指定するのではなく、datalabels: { color: 'red' } とかすれば良いような。 https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#modifying-labels

y_uta

2023/12/16 14:06

コメントありがとうございます！公式ドキュメントに記載があったのですね、、、、教えていただきありがとうございます、次回以降はきちんとドキュメントを確認して解決しなかったら質問いたします。

行動規範の内容に同意します

回答1件

ベストアンサー

下記ではどうでしょうか

js
1
2<script>
3  const myChart = new Chart(
4    document.getElementById('wfchart'),
5    {
6      type: 'bar',
7      data: {
8        labels: ['A', 'B', 'C', 'D', 'E'],
9        datasets: [
10          {
11            type: 'line',
12            label: '例１',
13            data: [50, 100, 350, 200, 300],
14            borderColor: "#666",
15            pointBackgroundColor: "rgba(23, 121, 189, 1)",
16            textStrokeColor: "#FFF",
17            fill: false,
18            yAxisID: "Chart1",
19            // <<<<<<<<<<<<<<<<< 追加 <<<<<<<<<<<<<<<<<<< 
20            datalabels: {
21              labels: {
22                value: {
23                  color: "green",
24                }
25              }
26            },
27            // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
28          },
29
30          {
31            type: 'bar',
32            label: '例2',
33            data: [100, 200, 300, 400, 500],
34            yAxisID: "Chart2",
35            backgroundColor: "#444",
36            barPercentage: 0.4,
37            // <<<<<<<<<<<<<<<<< 追加 <<<<<<<<<<<<<<<<<<< 
38            datalabels: {
39              labels: {
40                value: {
41                  color: "blue",
42                }
43              }
44            },
45            // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
46          },
47        ],
48      },
49      options: {
50以下略