[Chartjs]-Is there a way to change the react-chart-js tooltip only on a graph?

by

1👍

✅

You can use the options prop as follows to customize the tooltip title:

const options = {
  responsive: true,
  plugins:
  {
    tooltip:
    {
      callbacks:
      {
        title: (context) =>
        {
          return context[0].label
        },
      }
    },
  },
}

Then pass options as a prop to your Line component:

<Line options = {options} data = {data} />

In the example above, I’m returning context[0].label which is the label you already see on the x-axis. You can change the return value to anything you want, and you can put other necessary logic within the callback as well.

For example, you may choose to return context[0].parsed.x rather than the label. Or you may choose to use this value to put together the final title to return.

Read more about tooltip configuration in the docs.

Leave a comment