chart.jsのツールチップ編集、タイトルをD日 HH:mmにしたい

Question

前提・実現したいこと

chart.jsの面グラフを作成しているのですがtooltipsのtitleをD日 HH:mmの形にしたいです。
下記の記入の仕方が分かりません教えてもらえますか。
無駄な記入が多いと思いますが初心者ですのでご容赦ください

該当のソースコード

            tooltips:{
              mode:'label',
              callbacks: {
                title: function (tooltipItem, data){
                    //ここに記入
                },
              }
            },

全体のソース

    <script type="text/javascript">

      window.onload = function(){
      // ページ読み込み時に実行したい処理
      getSelectLabel("1");
      }

      function getSelectLabel(val){
        switch( val ) {
          case "1":
            var days = new Date(2012,11,3,21,0);
            break;
          case "2":
            var days = new Date(2012,11,2,24,0);
            break;
          case "3":
            var days = new Date(2012,11,1,0,0);
            break;
          }

    var xaxis=new Array(new Date(2012,11,1,0,0),new Date(2012,11,1,1,0),new Date(2012,11,1,2,0),new Date(2012,11,1,3,0),new Date(2012,11,1,4,0),new Date(2012,11,1,5,0),new Date(2012,11,1,6,0),new Date(2012,11,1,7,0),new Date(2012,11,1,8,0),new Date(2012,11,1,9,0),new Date(2012,11,1,10,0),new Date(2012,11,1,11,0),new Date(2012,11,1,12,0),new Date(2012,11,1,13,0),new Date(2012,11,1,14,0),new Date(2012,11,1,15,0),new Date(2012,11,1,16,0),new Date(2012,11,1,17,0),new Date(2012,11,1,18,0),new Date(2012,11,1,19,0),new Date(2012,11,1,20,0),new Date(2012,11,1,21,0),new Date(2012,11,1,22,0),new Date(2012,11,1,23,0),new Date(2012,11,1,24,0));

    var xaxisTX=new Array(100, 320, 327, 153, 323, 96, 118,90,300,60,106,329,59,369,123,101,208,399,221,202,213,38,177,375,400);

    var xaxisRX=new Array(12, 109, 297, 173, 309, 226, 99,128,189,125,91,256,387,105,199,374,140,169,116,215,120,163,163,383,200);

    var ctx = document.getElementById("myAreaChart");

    Chart.defaults.global.elements.point = {
    radius: 1,              // ポイントの半径
    hitRadius: 5,          // ホバー検出の半径
    };

    var myAreaChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: xaxis,
            datasets: [
                //データセット0 設定
                {
                    fill: 'origin', //'origin'まで塗る
                    label: 'TX(送信)',
                    data: xaxisTX,
                    lineTension:0,
                    borderColor: "rgba(223,0,0,1)",
                    backgroundColor: "rgba(223,0,0,0.8)"
                },

                {
                    fill: 'origin', //'origin'まで塗る
                    label: 'RX(受信)',
                    data: xaxisRX,
                    lineTension:0,
                    borderColor: "rgba(21,124,199,1)",
                    backgroundColor: "rgba(21,124,199,0.8)"
                },


            ]
        },
        options: {
            animation: false,
            scales: {
                xAxes: [{
                    type: "time", 
                    display: true,
                    stacked: false,
                    time: {
                        displayFormats: {
                            hour: "D日 HH:mm",
                        },
                        min: new Date(2012,11,1,0,0),
                        max: new Date(2012,11,1,24,0),
                    },
                    distribution: 'linear',
                }],
                yAxes: [{
                    display: true,      ////表示設定
                    stacked: false,
                    ticks: {
                        callback: function(value, index, values) {
                            return value + "kbps";
                            },
                        min: 0,      // 最小値
                        // beginAtZero: true でも同じ
                        stepSize: 100  // 間隔
                    },
                }]
            },
            responsive: false,
            layout: {                             //レイアウト
                padding: {                          //余白設定
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                }
            },
            legend: {
                display: false
            },
            responsive: true,
            tooltips:{
              mode:'label',
              callbacks: {
                title: function (tooltipItem, data){
                    
                },
              }
            },
        }
    });
  }
</script>

Answer 1

return tooltipItem[0].xLabel.getDate()+"日"+('0' + tooltipItem[0].xLabel.getHours()).slice(-2)+":"+('0' + tooltipItem[0].xLabel.getMinutes()).slice(-2)

tooltipItem[0]
で今表示しているtooltipを対象にできる

Comments

[ken_119]

Uncaught TypeError: tooltipItem[0].xLabel.getDate is not a function
のエラーが出てきてできませんでした。

[ken_119]

ありがとうございます。
解決できませんでしたのでひとまずHTML側で表示非表示を使い対処しました。
使い方でとても参考になったのでこちらをべストアンサーにしました。

Answer 2

var tooltipItem = tooltipItem.format("d日 HH:mm")

でいけるんじゃないかな。