Adding a 'thousands' separator to ChartJS's Y axis and tooltips

March 26, 2018


I learned the toLocaleString() method for adding thousands separators from this Github issue (https://github.com/chartjs/Chart.js/issues/411)

These options in your options config will add a thousands separator to your tooltips and yAxes.

options: {
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
return data.labels[tooltipItems.index] + ": " + data.datasets[0].data[tooltipItems.index].toLocaleString();
}
}
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: false,
callback: function(value, index, values) {
return value.toLocaleString();
}
}
}
]
}
}