react-chartjs-2: How to customize the onHover tooltip

Question

In a react-chartjs-2 bar chart: How do I customize all the information shown inside the tooltip when hovering over a bar?

I would expect something like data.datasets[x].tooltip.callback to be available, but I can't find anything useful/working.

Note: I prefer a more generalized answer over a very specific answer to the concrete situation I'm describing below. This would probably be more useful for other readers.

Concrete Situation

I'm plotting data in a bar graph.

X values are given as timestamps (milliseconds). Y values are numbers representing a percentage. Example:

data = [
  { x: timestamp(2022, 1, 1, 1, 15), y: 1 },
  { x: timestamp(2022, 1, 1, 1, 30), y: 2 },
  // ...
]

• X-axis ticks are formatted as 1:15, 1:30, ...
• Y-axis ticks are formatted as 0 %, 0.5 %, 1%, ....

Problem

When I hover over a bar, it will show:

• The timestamp in milliseconds
• The label of the data

I want the tooltip to show:

• The formatted version of the timestamp (like 1:15).
• The formatted version of the y-value (like 2%).
• No label at all

Complete Code of React Component

function timestamp(year: number, month: number, day: number, hour: number, minute: number) {
    const timestamp = new Date(year, month - 1, day, hour, minute).valueOf();
    return timestamp;
}


export const TimeGraph: React.FC = () => {
    const data = [
        { x: timestamp(2022, 1, 1, 1, 15), y: 1 },
        { x: timestamp(2022, 1, 1, 1, 30), y: 2 },
        { x: timestamp(2022, 1, 1, 1, 45), y: 3 },
        { x: timestamp(2022, 1, 1, 2, 0), y: 4 },
        { x: timestamp(2022, 1, 1, 2, 15), y: 2 },
    ];

    const xValues = data.map((value: any) => {
        return value.x;
    });
    const yValues = data.map((value: any) => {
        return value.y;
    });

    const options = {
        scales: {
            x: {
                grid: {
                    display: false,
                },
                ticks: {
                    callback: (index: any) => {
                        const date = new Date(xValues[index]);
                        return date.getHours() + ':' + date.getMinutes();
                    },
                },
            },
            yAxes: {
                grid: {
                    display: false,
                },
                ticks: {
                    callback: (value: any) => {
                        return value + ' %';
                    },
                },
            },
        },

        plugins: {
            legend: {
                position: 'top' as const,
            },
            title: {
                display: false,
            },
        },
    };

    const chartData = {
        labels: xValues,
        datasets: [
            {
                label: 'TODO: remove',
                data: yValues,
            },
        ],
    };

    return (
        <>
            <Bar options={options} data={chartData} height={150} />
        </>
    );
};

Answer 1

Answer for chart.js 3 (which is used by react-chartjs-2)

You can customize the tooltip via options.plugins.tooltip.callbacks (Reference)

const options = {
  plugins: {
    tooltip: {
      callbacks: {
        title: (xDatapoint) => {return formatXValue(xDatapoint.raw)},
        label: (yDatapoint) => {return formatYValue(yDatapoint.raw)},
      }
    }
  },
}

Note:

• This will customize all tooltips for all datasets.
• Take a look here if you'd like to use a completely customized tool tip

Side note: Remove label on top of diagram

This was not part of the question, but it showed up in the screenshot:

options.plugins.legend.display: false disables the legend.