I'm using react-chartjs-2 library to make simple charts in React. I tried to customize a bit the tooltip by adding a title:

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        return tooltipItem?.value + ' test';
      }
    }
  }

The code Sandbox:
The code doesn't work although I followed the chart.js example and also many other custom tooltip example (i.e answer from this question: React-chartjs-2: Pie Chart tooltip percentage ).

I'm using react-chartjs-2 library to make simple charts in React. I tried to customize a bit the tooltip by adding a title:

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        return tooltipItem?.value + ' test';
      }
    }
  }

The code Sandbox: https://codesandbox.io/s/zealous-mestorf-ste8u
The code doesn't work although I followed the chart.js example and also many other custom tooltip example (i.e answer from this question: React-chartjs-2: Pie Chart tooltip percentage ).

• javascript
• reactjs
• chart.js
• react-chartjs-2

2 Answers 2

You are using v2 syntax while using v3 so the option name and place where wrong, also your scale config was wrong, it should look like this:

const option = {
  plugins: {
    tooltip: {
      callbacks: {
        title: function () {
          return "my tittle";
        }
      }
    },
    legend: { display: false },
    title: {
      display: true,
      text: "Test chart",
      position: "top"
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

For more information about changes between v2 and v3 please check the migration guide

If the default tooltip is not working try registering it like this

ChartJS.register(Tooltip)