Chart.js - Formatting Y axis

Question

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 ?

Mcelroy

OP: Please re-consider chosen answer – Zwickau

Answer 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'
                }
            }
        ]
    }
}

Electrify

it's nice to hear that. – Electrify

This also seems to be the right way to do with angular-chart.js – Turmoil

this Ans must be accepted . i think this will work on new versions likely on 2.x.x and above. i have a new version and i tried many other solutions found in the web ,but nothing worked . this is the only thing worked for me .. – Ineducable

This works well. This should be accepted as the answer. Took me an hour to find this. Why this is not in the documentation, is beyond me. How did you find this, Jaison? – Schipperke

Thanks for this answer, helped me a lot with my project. – Antineutron

That's it ! ! ! ! – Mirella

If I have a method somewhere that adds K, M, B to numbers like 1000 => 1k. I tried calling the function inside the callback: function but it doesn't seem to work, why? and how can I call my method inside the callback? – Stillbirth

Can any one have solution for displaying mixed font style for labels ? stack overflow: #57731960 codepen: codepen.io/faltherr/pen/jONLVjd?editors=1011 – Nannettenanni

Have anyway to do the same thing without callback function? If answer is NO please tell me why? – Inquire

yeah you just predicted my label, so I just copy-pasted this code. God bless you!!!!!!!!!!!!!!!!!!!! – Grisby

Answer 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.

Notate

That's actual the best answer here. Due to a simple IF the function is directly called instead of running the embedded template parser which calls the JS code indirectly. – Tallu

where goes scaleLabel? – Reservist

Answer 3

scaleLabel : "<%= Number(value).toFixed(2).replace('.', ',') + ' $'%>"

Clockwise

why its not working for me. Please help me. #39256976 – Deathwatch

Answer 4

For anyone using 3.X.X, here's the updated syntax to change y axis labels:

scales: {
  y: {
    ticks: {
      callback: (label) => `$ ${label}`,
    },
  },
},

Accrual

Excellent! Thank you Andersen. I wanted to transform yAxes from: 1 - 2 - 3 etc.. to 1.0 - 2.0 - 3.0 and it was as simple as: callback: (label) => '${label}.0', – Exogenous

I had to define the callback like this: callback: function (value) {return `$ ${this.getLabelForValue(value)}`} to make this work. I found the getLabelForValue method in the docs here: chartjs.org/docs/latest/samples/scale-options/ticks.html – Ventilator

Answer 5

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

Car

Worked like charm! ty! – Shena

Answer 6

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)   %>"
};

jsFiddle example

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

};

jsFiddle example

Mueller

very clear, i was confused how to use scaleLabel with custom values Thanks +1 – Parhe

Answer 7

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...)

Repetitive

Answer 8

with chartjs 4.4.0, i found the way to change the number format alone, without need to change the labels or tooltip layouts or callbacks. this is the way i implemented the example of @Dexter above.

const options = {
...
    locale: 'hi',
    ticks: {
        format: {
            style: 'currency',
            currency: 'INR',
            currencyDisplay: 'symbol',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2, 
        },
    },
...
};

Wallack