Chartjs-Customize ChartJS Hover Data Format

by

0👍

You’re probably looking for a feature like this:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

This feature is well listed and described in the official doc. You probably just overlooked it. Please have a look at:
Label Callback · Tooltip · Chart.js

The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
(see code block above)

Frohes Neues!

Edit:

You can pass chart options, like you can pass data to React’s ChartJS.
It looks something like this: <Line ref="chart" data={data} options={options} />.

For more about that see: How to set options in react-chartjs-2?

0👍

You need to pass tooltips option like this sample: https://codesandbox.io/s/cool-feather-85xfi?file=/src/App.js:2175-2213, then custom your tooltip in bodyLines.forEach(function (body, i)

Leave a comment