var dmgchartt = document.getElementById("dmgchart");
    new Chart(dmgchartt, {
    type: "radar",
    data: radarChartData0,
    options: {
             tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
              scale: {
                ticks: {
                    beginAtZero: true
                }
            },
            title: {
            display: true,
            text: 'Title'
        }
    }
});

It just shows the value without percentage sign. I tried to add percentage sign after value on tooltip but it didn't work. Also how can i choose if tooltip is multi or single? I have 2 datasets.

    var dmgchartt = document.getElementById("dmgchart");
    new Chart(dmgchartt, {
    type: "radar",
    data: radarChartData0,
    options: {
             tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
              scale: {
                ticks: {
                    beginAtZero: true
                }
            },
            title: {
            display: true,
            text: 'Title'
        }
    }
});

It just shows the value without percentage sign. I tried to add percentage sign after value on tooltip but it didn't work. Also how can i choose if tooltip is multi or single? I have 2 datasets.

• javascript
• jquery
• charts
• chart.js

• You use Chart.js 2.0, right? Could you please provide a jsfiddle? tooltipTemplate is for Chart.js 1.0. In Chart.js 2.0 you use options.tooltips.callbacks.labels. – xnakos Commented Jun 11, 2016 at 18:59

4 Answers 4

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'
    }

    }
    });

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) + '%';
        }
      }
    }
  }

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']] + '%';

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

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