Chart.js number format
Put tooltips
in 'option' like this:
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
}
}
}
Reference from https://github.com/chartjs/Chart.js/pull/160.
Existing solutions did not to work for me in Chart.js v2.5. The solution I found:
options: {
scales: {
yAxes: [{
ticks: {
callback: function (value) {
return numeral(value).format('$ 0,0')
}
}
}]
}
}
I used numeral.js, but you can use the addCommas function proposed by Yacine, or anything else.
There is no built-in functionality for number formatting in Javascript. I found the easiest solution to be the addCommas function on this page.
Then you just have to modify your tooltipTemplate
parameter line from your Chart.defaults.global
to something like this:
tooltipTemplate: "<%= addCommas(value) %>"
Charts.js will take care of the rest.
Here's the addCommas
function:
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}