CODEWITHSUNDEEP
javascriptreactjschart.jsreact-chartjs-2
Đông Nguyễn Tấn
Đông Nguyễn Tấn

Reputation: 53

react-chartjs-2 tooltip callback not working

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 ).

Upvotes: 5

Views: 12916

Answers (2)

Mr Madhan
Mr Madhan

Reputation: 21

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

ChartJS.register(Tooltip)

Upvotes: 2

LeeLenalee
LeeLenalee

Reputation: 31429

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

Upvotes: 13

Related Questions