Chart.js - Formatting Y axis

String Formattingchart.js

String Formatting Problem Overview


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 ?

String Formatting Solutions


Solution 1 - String Formatting

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

Solution 2 - String Formatting

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.

Solution 3 - String Formatting

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

Solution 4 - String Formatting

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

Solution 5 - String Formatting

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

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

Solution 6 - String Formatting

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

Solution 7 - String Formatting

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPierre de LESPINAYView Question on Stackoverflow
Solution 1 - String FormattingJaison JamesView Answer on Stackoverflow
Solution 2 - String FormattingjacobangelView Answer on Stackoverflow
Solution 3 - String FormattingvicentedealencarView Answer on Stackoverflow
Solution 4 - String FormattingDexterView Answer on Stackoverflow
Solution 5 - String FormattingBrigham AndersenView Answer on Stackoverflow
Solution 6 - String FormattingStuartView Answer on Stackoverflow
Solution 7 - String FormattingNevercomView Answer on Stackoverflow