chart.jsのドーナツグラフでtooltipsのlabel(項目)の引数が受け取れない

Question

前提・実現したいこと

現在、タスク管理APPを作成しているのですが、その中でchart.jsのtooltipsを使って数字を時間に変換しているのですが、

tooltips内で引数の受け取り方が分からず、label(項目)が「undefined」になってしまっているので、もともとのラベルの表示をしたいです。

発生している問題・エラーメッセージ

画像の中段がlabel、下段がNaNとなってしまっています。

コードの中の「//★★★」で印をつけた部分で引数を受け取れるデータの書き方がわかりません。　

該当のソースコード

var chartFunc1 = function() {
    var ctx = chartEl1.getContext('2d');
    chart = new Chart(ctx, {
        type : 'doughnut',
        data : {
            labels: ['Jan', 'Feb', 'Mar'],
            datasets: [{
                label: 'dataset',
                data: [130, 250, 20],
                backgroundColor: [
                'rgb(153, 102, 255)',
                'rgb(255, 205, 86)',
                'rgb(54, 162, 235)'
                ],
            }],
        },
        options : {
            cutoutPercentage: 50, 

            legend : {
                labels : {
                    fontColor : "#0049A3",
                    fontSize : 14,
                },
            },
            animation: {
                duration: 5000,
                animateRotate: true,
                animateScale: true
            },
            tooltips: {
                callbacks: {
                  title: (tooltipItem, data) => {
                    return `My Title`;
                  },
                  label: (tooltipItem, data) => {	//時間を計算する
                      let time_label = Math.floor(`${(data.datasets[0].data[tooltipItem.index] / 60)}`) + ":" + ('00' + `${(data.datasets[0].data[tooltipItem.index] % 60)}`).slice(-2);
                      return `${tooltipItem.label}: ${time_label}`;  //★★★　ここの引数の値がわからない
                    },
                    footer: function(tooltipItem, data) {
                        let total = 0 // 合計格納
                        let indexItem = data.datasets[0].data[tooltipItem.index] // マウスを当てたデータ
                        // 全データの合計算出
                        data.datasets[0].data.forEach(item => {
                          total += item
                        })
                        // パーセント表示　★★★　ここの引数の値がわからない
                        return data.datasets[0].data[tooltipItem.label]  + Math.round(indexItem / total * 100) + ' %'
                      },

                },
                
              },

        }
    });
};

試したこと

・公式サイトを見ながらdata.datasets[0].data[tooltipItem.label]の思い当たるコードをlabelに関わりそうなコードを複数試したのですが、答えが分かりませんでした。
https://misc.0o0o.org/chartjs-doc-ja/configuration/tooltip.html#%E4%BD%8D%E7%BD%AE%E3%83%A2%E3%83%BC%E3%83%89

こちらの解決方法お分かりになられる方いらっしゃいましたら、ご教授願います。
よろしくお願いいたします。

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

chart.js　2.7.2を使用
ここにより詳細な情報を記載してください。

Answer 1

            tooltips: {
                callbacks: {
                  title: (tooltipItem, data) => {
                    return `My Title`;
                  },
                  label: (tooltipItem, data) => {    //時間を計算する
+                      // console.log("tooltipItem", tooltipItem);
+                      // console.log("data", data);
                      let time_label = Math.floor(`${(data.datasets[0].data[tooltipItem.index] / 60)}`) + ":" + ('00' + `${(data.datasets[0].data[tooltipItem.index] % 60)}`).slice(-2);
-                      return `${tooltipItem.label}: ${time_label}`;  //★★★　ここの引数の値がわからない
+                      return `${data.labels[tooltipItem.index]}: ${time_label}`;
                    },
                    footer: function(tooltipItem, data) {
+                        // console.log("footer:tooltipItem", tooltipItem);
+                        // console.log("footer:data", data);
                        let total = 0 // 合計格納
-                        let indexItem = data.datasets[0].data[tooltipItem.index] // マウスを当てたデータ
+                        let indexItem = data.datasets[0].data[tooltipItem[0].index] // マウスを当てたデータ

                        // 全データの合計算出
                        data.datasets[0].data.forEach(item => {
                          total += item
                        })
                        // パーセント表示　★★★　ここの引数の値がわからない
-                        return data.datasets[0].data[tooltipItem.label]  + Math.round(indexItem / total * 100) + ' %'
+                        return data.labels[tooltipItem[0].index] + " " + Math.round(indexItem / total * 100) + ' %'
                      },

                },

---

調べる方法として、
label: (tooltipItem, data)
等の直後に

console.log("tooltipItem", tooltipItem);
console.log("data", data);

と入れて、ブラウザのDevelopers Toolのconsoleウィンドウを見ます。

例）
１. 上記コードのうち、label:の直下でコメントになっているconsole.log～2行の行頭コメント//を外しておきます。
２. ページを更新してグラフをブラウザに表示させます。
３. ブラウザのDeveloper toolsを表示させConsoleウィンドウを表示します。
４. 図のように、グラフの黄色のエリアにマウスポインタを当てます。　（黄色は「Feb」つまり2番目のデータ）


５. このとき直近のConsoleウィンドウにログがずらずら表示されますが、一番下の２行に注目します。（図）


６. 「toolTipItem」 と 「data」それぞれの右隣りの三角形をクリックして展開し、下図のような状態にします。
[toolTipItem]

　
[data] 　（datasets とその中の 0 および labelsを展開する）

　
７. 今回、黄色エリアのラベルとして取得したいのは、「Feb」というラベル表示です。
先ほど展開したオブジェクトを見ると、data の中で"Feb"という表示を持っている場所は、
data -> labels という配列の中の インデックス 1 であることが分かります。
したがって、コード中で「data.labels[1] 」と書けば「Feb」と表示できるはずです。


８. この「1」というインデックスは、マウスをポイントするエリアに合わせて切り替えないといけません。（仮にコード中に　return data.labels[1] と書いてしまうと 全てのエリアで「Feb」と表示されてしまいます）したがって、あとはポイントしたエリア毎に変化するindex値がどこにあるかを探せばよい、ということになります。

９.　マウスを動かして色々試すことで、**tooltipItemの中の「index」**が、このエリア毎に変化するindex値に対応していることが分かります。

１０．したがって、さきほどの配列data.labelsのインデックスには、tooltipItem.index を指定すればよいことがわかります。

１１．上記をまとめると

data.labels[tooltipItem.index]

と書けば、それぞれのエリアに対応したラベル（"Jan","Feb","Mar"）にアクセスできることがわかります。

Comments

[ataru2222]

ばっちりできました。
本当にありがとうございます。

確認方法の部分なのですが、、、
```ここに言語を入力
tooltips: {
callbacks: {
title: (tooltipItem, data) => {
return `My Title`;
},
label: (tooltipItem, data) => { //時間を計算する
console.log(tooltipItem, data);
let time_label = Math.floor(`${(data.datasets[0].data[tooltipItem.index] / 60)}`) + ":" + ('00' + `${(data.datasets[0].data[tooltipItem.index] % 60)}`).slice(-2);
return `${data.labels[tooltipItem.index]}: ${time_label}`;
},
footer: function(tooltipItem, data) {
let total = 0 // 合計格納
let indexItem = data.datasets[0].data[tooltipItem[0].index] // マウスを当てたデータ
// 全データの合計算出
data.datasets[0].data.forEach(item => {
total += item
})
// パーセント表示
return data.labels[tooltipItem[0].index] + " " + Math.round(indexItem / total * 100) + ' %'
},
},
},
}
```

コンソールには
Object { xLabel: "", yLabel: "", index: 0, datasetIndex: 0, x: 310.5, y: 172 }
Array [ {…} ]　Object { labels: (3) […], datasets: (1) […] }

展開すると
Object { xLabel: "", yLabel: "", index: 1, datasetIndex: 0, x: 310.5, y: 172 }
datasetIndex: 0
index: 1
x: 310.5
xLabel: ""
y: 172
yLabel: ""
<prototype>: Object { … }

Object { labels: (3) […], datasets: (1) […] }
datasets: Array [ {…} ]
​​
0: Object { label: "dataset", data: (3) […], backgroundColor: (3) […], … }
length: 1
<prototype>: Array []
labels: Array(3) [ "Jan", "Feb", "Mar" ]
0: "Jan"
1: "Feb"
2: "Mar"
length: 3
<prototype>: Array []
<prototype>: Object { … }

のようなものが並びます。
そこからこちらの
${(data.datasets[0].data[tooltipItem.index]

ようなコードには結びつかないのですが
少しだけ解説していただけると嬉しいです。

[退会済みユーザー]

すみません、console.log(tooltipItem, data); 1行よりも
console.log("tooltipItem", tooltipItem);
console.log("data", data);
の2行を追加した方が分かりやすいですね。

解説を回答欄に追加しました。

[ataru2222]

すごすぎです！！公式ページに載っけといて欲しいほど、分かりやすい説明(笑)

本当に本当にありがとうございました(涙)

自分でも色々いじってchart.jsのtooltipsをもう少し自由に使えるように勉強していきます。
私なんかの為に貴重なお時間を割いて、説明していただきありがとうございました。