JavaScript Chart.js - Custom data formatting to display on tooltip

Question

I have looked at various documentation and similar questions on here, but cannot seem to find the particular solution. Apologies if I have missed anything obvious or have repeated this question!

As a bit of background info, I have implemented 4 graphs using the Chart.js plugin and passed in the required data using PHP from a database. This is all working correctly and is fine.

My problem is I need to display the data in the tooltips as formatted data aka. as numeric with %. As an example, one of my data from database is -0.17222. I have formatted it as a percentage to display in my table and all is well. However, when setting the data for the chart.js bar graph, the data is obviously missing this formatting and displaying as the -0.17222 which I do not want.

Sorry, I wanted to post a picture, but my reputation is too rubbish!

I grab data from database, then set into my table:

var kpiRex = new Handsontable(example1, {     data: getRexData(), 

Then I feed this data like so in the chart section:

data: kpiRex.getDataAtRow(3) 

Any help would be great! I've been stuck on this for hours and it's probably something really simple I am overlooking.

Answer 1

For chart.js 2.0+, this has changed (no more tooltipTemplate/multiTooltipTemplate). For those that just want to access the current, unformatted value and start tweaking it, the default tooltip is the same as:

options: {     tooltips: {         callbacks: {             label: function(tooltipItem, data) {                 return tooltipItem.yLabel;             }         }     } } 

I.e., you can return modifications to tooltipItem.yLabel, which holds the y-axis value. In my case, I wanted to add a dollar sign, rounding, and thousands commas for a financial chart, so I used:

options: {     tooltips: {         callbacks: {             label: function(tooltipItem, data) {                 return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {                     return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;                 });             }         }     } } 

Answer 2

You want to specify a custom tooltip template in your chart options, like this :

 // String - Template string for single tooltips  tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",  // String - Template string for multiple tooltips  multiTooltipTemplate: "<%= value + ' %' %>", 

This way you can add a '%' sign after your values if that's what you want.

Here's a jsfiddle to illustrate this.

Note that tooltipTemplate applies if you only have one dataset, multiTooltipTemplate applies if you have several datasets.

This options are mentioned in the global chart configuration section of the documentation. Do have a look, it's worth checking for all the other options that can be customized in there.

Note that Your datasets should only contain numeric values. (No % signs or other stuff there).