Tag: chart.js Tag: javascript Tag: グラフ

　chart.jsでマーカーにカーソルを合わせた時に表示されるツールチップの表示内容を変更するにはどうしたら良いですか。具体的な用途ですが、日付をデータとしては「2026-01-22」としているのに、ツールチップには、「2026-01-22 00:00:00」の様に表示されてしまうので、それを修正したい。

Chart.js ツールチップのカスタマイズ（日付表示の修正）

Chart.jsでマーカーにカーソルを合わせた際のツールチップ表示を変更するには、plugins.tooltip.callbacks を設定します。

実装コード例

日付の「00:00:00」を消して「YYYY-MM-DD」のみにする例です。

const config = {
  type: 'line',
  data: { /* データ設定 */ },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          // ツールチップのタイトル行をカスタマイズ
          title: function(context) {
            const fullDate = context[0].label;
            // スペースで分割して日付部分（0番目）だけを返す
            return fullDate.split(' ')[0]; 
          }
        }
      }
    }
  }
};

主な用語解説

コールバック (Callback)

特定のイベント（ツールチップ描画など）が発生した際に実行される関数のこと。

コンテキスト (Context)

マウスが乗っている場所の値や、データのインデックスなどの情報を保持したオブジェクト。

title

ツールチップの最上部に表示されるテキスト。デフォルトではX軸のラベル。

label

データポイント（点）ごとの値を表示するテキスト。

備考

• 日付ライブラリ（date-fns等）を使用している場合は、scales.x.time.tooltipFormat でフォーマットを指定することも可能です。