Chart.js V2.0 is a useful javascript charting library. It looks great, has ton of features though it is new enough that there is still some work to find out how to get some relatively simple things done.
In this case I wanted to format the chart’s tooltip. Tooltips are the pop-ups that show when you hover mouse over a bar or line in a chart and show the yAxis value along with any other information you want to include.
By default Chart.js tooltips do not format numbers with commas and there was no simple option to do this.
After some Googling, I found out it required using Chart.js callbacks feature which can be used to format chart elements. Note V1 used a different method that modified a tooltip’s template but that is now deprecated in V2.0.
The callback is in the Options’ tooltips section. You put function into the callback that uses regex to insert commas.
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
},
This can be done as a global change to all charts in the page or just to a specific chart which is what I used and is shown in the example below.
The result is that the tooltip now has a commas.
