chart.jsのtooltipsでlabelの値の受け取り方と加工方法がわからない

Question

前提・実現したいこと

chart.jsのtooltipsのlabel項目で、もともとあるlabelの値(引数)を受け取って、計算を加えて表示したい

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

現在こちらのサイト
https://r17n.page/2020/09/27/chartjs-tooltip-text-customize/
を参考にtooltipsの項目を作成してみたのですが、もともとあるlabelの項目が受け取れずにundefinedになってしまいます。

公式サイトを参考にいろいろいじってみた結果
labelの項目を　beforeLabelに変更するともともとの値が受けとれていることがわかりました。
(下段に表示「大学院生:90」と表示)

この値「90」の部分に計算を加えて表示しようとしているのですがどうしてもうまくいきません。
(${tooltipItem.label}, ${tooltipItem.value})こちらのコードで、引数としてうまく値が受け取れていないのですがどのように書けば正しい値が受け取れるのか、わからない状態です。

該当のソースコード

var chartFunc2 = function() {
    var ctx = chartEl2.getContext('2d');
    // ctx.width=window.innerWidth*0.1;
    // ctx.height=window.innerHeight*0.1;
    chart = new Chart(ctx, {
        type : "bar", // 縦なら "bar" を指定
        data : {
            labels : [ "5/1", "5/2", "5/3", "5/4", "5/5", "5/6", "5/7", "5/8","5/9", "5/10", ],
            datasets : [
                    {
                        label : "学部学生",
                        borderWidth : 1,
                        backgroundColor : "#121554",
                        borderColor : "#121554",
                        data : [ 180, 184, 36, 170, 94, 56, 39, 127, 160, 123, 114]
                    },
                    {
                        label : "大学院生",
                        borderWidth : 1,
                        backgroundColor : "#9b59b6",
                        borderColor : "#1d3681",
                        data : [ 90, 84, 26, 72, 34, 66, 29, 127, 140, 13, 110]
                    },
                    {
                        label : "教員",
                        borderWidth : 1,
                        backgroundColor : "#2e70a7",
                        borderColor : "#2e70a7",
                        data : [ 70, 124, 146, 120, 14, 36, 19, 27, 61, 13, 14]
                    },
                    {
                        label : "職員",
                        borderWidth : 1,
                        backgroundColor : "#4eadc7",
                        borderColor : "#4eadc7",
                        data : [ 40, 34, 16, 12, 54, 36, 69, 28, 80, 100, 124]
                    },
                    {
                        label : "一般利用者",
                        borderWidth : 1,
                        backgroundColor : "#a7d8bf",
                        borderColor : "#a7d8bf",
                        data : [ 30, 44, 32, 10, 23, 51, 15, 68, 160, 13, 114]
                    } ]
        },
      //グラフ設定
        options: {
            //凡例は非表
            legend: {
                display: true
            },
            tooltips: {
                callbacks: {
                  title: (tooltipItem, data) => {
                    return return `My Title`;
                  },
                  label: (tooltipItem, data) => {
                      return `My Label (${tooltipItem.label}, ${tooltipItem.value})`;
                    },
                  footer: (tooltipItem, data) => {
                    return `My Footer`;
                  },
                },
                backgroundColor: '#eee',
                borderColor: '#000',
                borderWidth: 3,
                displayColors: false,
                titleFontColor: 'red',
                bodyFontColor: 'orange',
                footerFontColor: 'green',
                titleFontStyle: 'bold',
                bodyFontStyle: 'bold',
                footerFontStyle: 'bold',
                titleFontSize: 16,
                bodyFontSize: 14,
                footerFontSize: 12,
              },

            scales: {
                //X軸
                xAxes: [{
                    stacked: true, //積み上げ棒グラフにする設定
                    ategoryPercentage:0.4, //棒グラフの太さ
                    //軸ラベル表示
                    scaleLabel: {
                        display: true,
                        labelString: '時間'
                    }

                }],
                //Y軸
                yAxes: [{
                    stacked: true, //積み上げ棒グラフにする設定
                    //軸ラベル表示
                    scaleLabel: {
                        display: true,
                        labelString: '日付'
                    },

                }]
            }
        }

    });
};

試したこと

・https://r17n.page/2020/09/27/chartjs-tooltip-text-customize/
こちらのサイトを参考にtooltipsのlabel項目の値を変えてみる
・https://misc.0o0o.org/chartjs-doc-ja/configuration/tooltip.html
公式サイトを参考にlabelの項目をbeforeLabelに変更
→もともとの値(引数)は受け取れているが変更できない

tooltipsのlabel項目で引数を受け取って計算を加えて表示する方法をお分かりになられる方、
いらっしゃいましたら、ご教授ください。
よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

Answer 1

（質問のコードで積み上げ棒グラフが表示できているので、Chart.jsのバージョンが2系であるとの前提です 。Chart.js ver 2.9.3で確認しています。）

各項目のタイトルは、data.datasets[tooltipItem.datasetIndex].label
値は、tooltipItem.yLabel
で取れると思います。

              label: (tooltipItem, data) => {
                return `${data.datasets[tooltipItem.datasetIndex].label}: ${tooltipItem.yLabel} 時間`;
              },

適用例：

---

縦軸を「00:00」表記にするには下記のようにします。

      scales: {
        //X軸
        xAxes: [{
          stacked: true, //積み上げ棒グラフにする設定
          categoryPercentage: 0.4, //棒グラフの太さ   修正
          //軸ラベル表示
          scaleLabel: {
            display: true,
            labelString: '日付'  // 修正
          }

        }],
        //Y軸
        yAxes: [{
          stacked: true, //積み上げ棒グラフにする設定
          //軸ラベル表示
          scaleLabel: {
            display: true,
            labelString: '時間'  // 修正
          },
          // 下記追加
          ticks: {
            callback: function (value, index, values) {
              var h = Math.round(value / 60)
              var m = value % 60
              var hh = h < 10 ? "0" + h : h
              var mm = m < 10 ? "0" + m : m
              return `${hh}:${mm}`;
            },
            max: 720,
            min: 0,
            stepSize: 60
          }
        }]
      }

Comments

[ataru2222]

解答していただきありがとうございます。
変数を用いて計算することもでき、やりたいことができました。
コードが違った理由はversionが違ったからなのですね。
勉強になりました。

本当にありがとうございました。

[ataru2222]

すみません。
もう一件お分かりになりましたら教えていただきたいのが、

左の軸ラベルの値も時間軸に変更したいのですが、変更の仕方をご存知でしょうか？
tooltips内に書くのかyAxes: [{}]内に書くのか？どの構文を書けばいいのかもわからないので、お分かりになりましたら教えていただけると幸いです。

よろしくおねがいいたします。

[退会済みユーザー]

すみません、「左の軸ラベルの値も時間軸に変更」というのは、
左端の軸の「日付」というラベルを、「時間」という表示に変えたい、という意味でしょうか？

[ataru2222]

すいません。
左の軸ラベルの「日付」は「時間」の間違いです。
こちらはyAxes: [{}]内に項目があるのでわかるのですが、左の軸の数字(0-700)の値を60で割って出た数に:00をようと考えております。

こちらの書く場所と書き方が分からない状況です。軸ラベルと書いてしまったので誤解を生んでしまい、すいません。

お分かりになりましたら、よろしくお願いいたします。

[退会済みユーザー]

回答欄に追加しました。

[ataru2222]

すごすぎです！！
1日調べて潰れるかと思い困っていましたが、本当に助かりました。

本当にありがとうございました。

[退会済みユーザー]

あと棒グラフの太さで 「ategoryPercentage (cが抜けている)」 となっていたのを修正しました。

[ataru2222]

気づきませんでした。
本当にありがとうございます(涙)