I'm using Chart.js to generate a bar chart that shows currency values. By default the y-axis labels use metric prefixes for abbreviation, e.g. 1k is displayed instead of 1000 and 1M instead of 1000000.
I have tried this code but it shows only the currency symbol but my number still like 1000000 formats!
this is the code what I have tried.
yAxes: [{
ticks: {
display: true,
beginAtZero: false,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value ;
} else {
return value;
}
}
},
gridLines: {
show: true,
}
}],
thanks
I'm using Chart.js to generate a bar chart that shows currency values. By default the y-axis labels use metric prefixes for abbreviation, e.g. 1k is displayed instead of 1000 and 1M instead of 1000000.
I have tried this code but it shows only the currency symbol but my number still like 1000000 formats!
this is the code what I have tried.
yAxes: [{
ticks: {
display: true,
beginAtZero: false,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value ;
} else {
return value;
}
}
},
gridLines: {
show: true,
}
}],
thanks
Share Improve this question edited Jun 17, 2017 at 18:19 A.Alshaikhli asked Jun 17, 2017 at 15:59 A.AlshaikhliA.Alshaikhli 4374 gold badges9 silver badges19 bronze badges 3- I still searching for the answer. do you have any idea how to solve it please ? – A.Alshaikhli Commented Jun 18, 2017 at 10:50
-
are your y-axis labels already display as
1kor just1000(regardless of$) ? and do you have regular (vertical) bar chart or horizontal ? – ɢʀᴜɴᴛ Commented Jun 18, 2017 at 11:04 - i have vertical bar chart and it still display the value number like 1000! – A.Alshaikhli Commented Jun 18, 2017 at 11:08
1 Answer
Reset to default 17You can acplish this using the following y-axis ticks callback function ...
yAxes: [{
ticks: {
stepSize: 100000,
callback: function(value) {
var ranges = [
{ divider: 1e6, suffix: 'M' },
{ divider: 1e3, suffix: 'k' }
];
function formatNumber(n) {
for (var i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
return (n / ranges[i].divider).toString() + ranges[i].suffix;
}
}
return n;
}
return '$' + formatNumber(value);
}
}
}]
You would also need to add some padding to the left of the chart, so that, the y-axis labels fits properly to the view ...
layout: {
padding: {
left: 10
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById('c').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Profit',
data: [666666, 777777, 888888, 999999, 1100000],
backgroundColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
borderColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
borderWidth: 1
}]
},
options: {
legend: { display: false },
responsive: false,
layout: {
padding: {
left: 10 //set as you wish
}
},
scales: {
yAxes: [{
ticks: {
stepSize: 100000,
callback: function(value) {
var ranges = [
{ divider: 1e6, suffix: 'M' },
{ divider: 1e3, suffix: 'k' }
];
function formatNumber(n) {
for (var i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
return (n / ranges[i].divider).toString() + ranges[i].suffix;
}
}
return n;
}
return '$' + formatNumber(value);
}
}
}]
}
}
});<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c" width="350" height="200"></canvas>