Chart.js - Formatting Y axis
I'm using Chart.js to draw a simple bar plot and I need to format its Y axis like
123456.05 to 123 456,05 $
I don't understand how to use scaleLabel : "<%=value%>"
I saw someone pointing to "JS Micro-Templating",
but no clue how to use that with our scaleLabel
option.
Does someone know how to format this Y axis, and maybe give me an example ?
Solution 1:
I had the same problem, I think in Chart.js 2.x.x the approach is slightly different like below.
ticks: {
callback: function(label, index, labels) {
return label/1000+'k';
}
}
More in details
var options = {
scales: {
yAxes: [
{
ticks: {
callback: function(label, index, labels) {
return label/1000+'k';
}
},
scaleLabel: {
display: true,
labelString: '1k = 1000'
}
}
]
}
}
Solution 2:
An undocumented feature of the ChartJS library is that if you pass in a function instead of a string, it will use your function to render the y-axis's scaleLabel.
So while, "<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"
works, you could also do:
scaleLabel: function (valuePayload) {
return Number(valuePayload.value).toFixed(2).replace('.',',') + '$';
}
If you're doing anything remotely complicated, I'd recommend doing this instead.