CODEWITHSUNDEEP
javascriptchart.js
Boris Kamp
Boris Kamp

Reputation: 338

Chart.js Tooltips customization

I was wondering how to append a symbol like % to the tooltips nummeric value? I've been searching trough the docs but was unable to find it, however, on their main site, they've appended the size value kB to the pie tooltips

How can I achieve something similar?

Thanks

Upvotes: 1

Views: 714

Answers (1)

Dean
Dean

Reputation: 1542

Well, you can change the tooltip template option : By default it is : 

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

Change it to be tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%" in the option object you give to create your chart.

I used it because I wanted to show the user a percentage that is not proportional to the size on my chart (My donut chart represent a process, and some process take less time than others so the size isn't the same for all of them)

The exact example you gave was with kb. Here is the exact code I copy and paste from the index page from Chart.js :

var moduleDoughnut = new Chart(canvas.getContext('2d')).Doughnut(moduleData, { 
    tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %>kb",
    animation: false 
});

Upvotes: 2

Related Questions