To change the text on mouse-hover in pie-chart.

I am using chartJS 2 and drawing Pie Chart. And I am looking for option to customize the mouse hover data. I am not able to figure out if such an option exists. Currently. if my label is X and data is 35. On Pie Chart on mouse hover I will see something like X: 35. I want to see something like “X:35 %%”. Added a percentage at the end. How can I achieve this?

Author: Fantashit

2 thoughts on “To change the text on mouse-hover in pie-chart.

  1. @tnayanam you can change the tooltip label callback to add a percent

    options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, chartData) {
            // return string here
  2. Thank you so much for the reply. But I am a newbie. I debugged and finally able to get the required output. Have I done it correctly. Can you kindly rectify. Code:
    return chartData.labels[tooltipItem.index] + ‘: ‘ + chartData.datasets[0].data[tooltipItem.index] + ‘%%’;

    It gives me what I want. I just wanted you to review. Hope I have not done something silly. Thanks again.

Comments are closed.