[Chartjs]-Chart.js Adding Percantage Sign on Tooltip

by

16👍

If you’re using Chart.js 2.0 as suggested by @xnakos in the comments you have to use options.tooltips.callbacks.label 

 var dmgchartt = document.getElementById("dmgchart");
 new Chart(dmgchartt, {
        type: 'radar',
        data: data,
        options: {
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data['datasets'][0]['data'][tooltipItem['index']] + '%';
                    }
                }
            },
          scale: {
            ticks: {
                beginAtZero: true
            }
        },
        title: {
        display: true,
        text: 'Title'
    }

    }
    });

3👍

Mentioned solutions did not work for me. It throws away default label handling (data.labels/dataset labels) and you must format string again. If you need only to add percentage sign, you can simply use default callback Chart.defaults.global.tooltips.callbacks.label as doc says. So for v2.x it will be:

 options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return Chart.defaults.global.tooltips.callbacks.label(tooltipItem, data) + '%';
        }
      }
    }
  }

0👍

Mac’s answer is super close, but I had an issue when implementing it as:

return data['datasets'][0]['data'][tooltipItem['index']] + '%';

instead use tooltipItem[‘datasetIndex’] to allow the correct display to show on hover. Otherwise it will only show the first array values no matter what is hovered on. My implemented solution below:

return data['datasets'][tooltipItem['datasetIndex']]['data'][tooltipItem['index']] + '%';

-2👍

You should try to put the % outside the value block.
I use it like this:

    tooltipTemplate: "<%= label %>: <%= value %>%",

Leave a comment