[Chartjs]-How to append text or symbol to tooltip of chart.js

by

5👍

options : {
         tooltips: {
                  enabled: true,
                  mode: 'single',
                  callbacks: {
                           label: function (tooltipItems, data) {
                                return  tooltipItems.yLabel + " %";
                           }
                  }
         }

2👍

I too faced the same issue 3+

plugins: {
  tooltip: {
    yAlign: 'bottom',
    callbacks: {
      label(tooltipItems: any) {
        return `${tooltipItems.formattedValue} %`
      }
    }
  }
}

1👍

This code works also for Pie Charts:

tooltips: {
    enabled: true,
    mode: 'single',
    callbacks: {
        label: function (tooltipItems, data) {
            var i = tooltipItems.index;
            return data.labels[i] + ": " + data.datasets[0].data[i] + " %";
        }
    } 
}

0👍

Update: This is for Chartjs Version – 3.9.1

 tooltip: { 
    callbacks: {
     label: function (context) {
        return context.label + ': ' + context.formattedValue + '%';
     }
   }
 }

With this you can attach suffix or prefix to label value in tooltip.

Leave a comment