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

user_15150002 0
Viewed 59

I have the following:

     const labels = historicosData.map(historico => {
    const localDate = new Date(historico.fechaIngreso);
    return localDate.toLocaleString('es-ES', { month: 'long' })
  });
  //const labels = historicosData.map(({ anio }) => anio);
  // const labels = [123, 321, 456, 123, 4568]
  const data = {
    labels,
    datasets: [
      {
        label: 'Valores históricos',
        fill: false,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 10,
        pointRadius: 10,
        pointHitRadius: 10,
        data: historicosData.map(({ valor }) => valor),
      },
    ],
  };

And it displays the following graph: Graph

Is there a way where I can change the default message of the tooltip (the one saying 'mayo') for a personalized message?

My main purpose is to make the X bottom axis to display only the months' name and display the whole date when the user's hover over one specific point

react-chartjs chart.js reactjs javascript
1 Answers

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.

user_35588740
Related