score:178

Accepted answer

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

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

score: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

score:7

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

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

score:9

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

score:14

scalelabel : "<%= number(value).tofixed(2).replace('.', ',') + ' $'%>"

score:56

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.


Related Query

More Query from same tag