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 ?

OP: Please re-consider chosen answer – vsync Sep 22 '18 at 12:24 — vsync, Sep 22 '18 at 12:24

score 184 · Accepted Answer · edited Nov 06 '16 at 13:21

184

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

edited Nov 06 '16 at 13:21

pacholik

8,607
9
43
55

answered Jul 11 '16 at 04:44

Jaison James

4,414
4
42
54

3

it's nice to hear that. – Jaison James Sep 28 '16 at 12:50
4

This also seems to be the right way to do with angular-chart.js – user1576978 Oct 26 '16 at 12:26
3

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 .. – Justin Mar 14 '17 at 06:27
2

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? – Jay Apr 17 '17 at 13:15
2

Thanks for this answer, helped me a lot with my project. – mikey242 May 08 '17 at 10:01
1

That's it ! ! ! ! – McGrady May 10 '17 at 08:46
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? – Gashio Lee Nov 28 '19 at 16:23
Can any one have solution for displaying mixed font style for labels ? stack overflow: https://stackoverflow.com/questions/57731460/chart-js-customizing-tick-labels-for-mixed-font-styles codepen: https://codepen.io/faltherr/pen/jONLVjd?editors=1011 – Pradeep kumar Nov 17 '20 at 20:29
Have anyway to do the same thing without callback function? If answer is NO please tell me why? – Feb 16 '21 at 05:33

score 57 · Answer 2 · edited Dec 29 '15 at 22:00

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.

edited Dec 29 '15 at 22:00

Nkosi

235,767
35
427
472

answered Feb 24 '15 at 16:04

jacobangel

6,896
2
34
35

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. – schlingel Mar 03 '15 at 10:32
where goes scaleLabel? – NingaCodingTRV Apr 09 '22 at 06:45

score 14 · Answer 3 · edited Dec 29 '15 at 22:20

14

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

edited Dec 29 '15 at 22:20

Nkosi

235,767
35
427
472

answered Oct 27 '14 at 13:31

vicentedealencar

913
1
10
20

why its not working for me. Please help me. http://stackoverflow.com/questions/39256476/how-to-change-the-y-axis-to-show-in-chartjs – Unbreakable Aug 31 '16 at 18:26

score 13 · Answer 4 · answered Jun 15 '21 at 21:46

13

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

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

answered Jun 15 '21 at 21:46

Brigham Andersen

131
1
3

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',` – Periklis Kakarakidis Dec 29 '21 at 15:47

Dexter · Answer 5 · 2023-04-10T11:28:50.320

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

Worked like charm! ty! – Mohammed A. Fadil Mar 17 '20 at 16:07 — Mohammed A. Fadil, Mar 17 '20 at 16:07

score 5 · Answer 6 · edited Dec 29 '15 at 21:55

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

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

edited Dec 29 '15 at 21:55

Nkosi

235,767
35
427
472

answered Aug 15 '14 at 10:14

Stuart

1,227
17
21

1

very clear, i was confused how to use scaleLabel with custom values Thanks +1 – MasoodRehman Apr 13 '16 at 14:19

score 2 · Answer 7 · answered Apr 02 '14 at 21:07

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

Chart.js - Formatting Y axis

7 Answers7

Linked

Related