185๐
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'
}
}
]
}
}
57๐
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.
14๐
scaleLabel : "<%= Number(value).toFixed(2).replace('.', ',') + ' $'%>"
13๐
For anyone using 3.X.X
, hereโs the updated syntax to change y axis labels:
scales: {
y: {
ticks: {
callback: (label) => `$ ${label}`,
},
},
},
10๐
Chart.js 2.X.X
I know this post is old. But if anyone is looking for more flexible solution, here it is
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
return Intl.NumberFormat().format(label);
// 1,350
return Intl.NumberFormat('hi', {
style: 'currency', currency: 'INR', minimumFractionDigits: 0,
}).format(label).replace(/^(\D+)/, '$1 ');
// โน 1,350
// return Intl.NumberFormat('hi', {
style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2
}).format(label).replace(/^(\D+)/, '$1 ');
// โน 1,350.00
}
}
}]
}
}
โhiโ is Hindi. Check here for other locales argument
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation#locales_argument
for more currency symbol
https://www.currency-iso.org/en/home/tables/table-a1.html
5๐
As Nevercom said the scaleLable should contain javascript so to manipulate the y value just apply the required formatting.
Note the the value is a string.
var options = {
scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2) %>"
};
if you wish to set a manual y scale you can use scaleOverride
var options = {
scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2) %>",
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0
};
2๐
Here you can find a good example of how to format Y-Axis value.
Also, you can use scaleLabel : "<%=value%>"
that you mentioned, It basically means that everything between <%=
and %>
tags will be treated as javascript code (i.e you can use if
statmentsโฆ)