CODEWITHSUNDEEP
javascriptjquerychartschart.js
Yusuf Devranlı
Yusuf Devranlı

Reputation: 159

chart.js Adding Percantage Sign on Tooltip

    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.

tooltip

Upvotes: 5

Views: 9638

Answers (4)

Rharris389
Rharris389

Reputation: 89

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

Upvotes: 0

bigless
bigless

Reputation: 3111

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

Upvotes: 3

Mac
Mac

Reputation: 413

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

    }
    });

Upvotes: 16

Jerry Unkhaptay
Jerry Unkhaptay

Reputation: 1338

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

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

Upvotes: -2

Related Questions