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.
Add this in order show the label name before the value, when you have multiple datasets:
tooltips: {
mode: ‘index’,
label: ‘myLabel’,
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ‘: ‘+ tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “.”);
}
}
}
thank you very much . that’s work
Gracias por tu aporte me sirvió mucho
Thanks,. you saved my day
HI, thank you for the great / helpful article.
In the article you mentioned that the callback function can be “done as a global change to all charts in the page or just to a specific chart”.
Can you please share how it can be done globally?
Thank you.
Hey Guntar, glad it was helpful!
Chart.js has a concept called “global parameters” that allows you to specify chart options as separate functions and they will apply to all charts. This is nice feature so you do not have to repeat same function in multiple charts.
The ‘global parameters’ options are described in documentation
I haven’t tested this but I think this should be global definition for the tool tip option in my example:
Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
},
Thank you Curtis for help!
I got it working, below is my version on how to set, in my case, Tooltip options globally and format as Currency
“`
import Chart from ‘chart.js’
Chart.defaults.global.tooltips.backgroundColor = ‘rgba(50,50,50,0.8)’;
Chart.defaults.global.tooltips.titleFontSize = 14;
Chart.defaults.global.tooltips.bodyFontSize = 14;
Chart.defaults.global.tooltips.xPadding = 10;
Chart.defaults.global.tooltips.titleMarginBottom = 8;
Chart.defaults.global.tooltips.position = ‘nearest’;
Chart.defaults.global.tooltips.displayColors = false;
Chart.defaults.global.tooltips.callbacks.label = (tooltip) => this.currency(tooltip.value);
currency(value){
return ‘$’+value.replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
“`