Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator

Question

I am having problems with formatting my chart axis and I am not able to find an example for the updated version 2.0.

How can I (for example) make 2000000 to €2.000.000?

My fiddle: https://jsfiddle.net/Hiuxing/4sLxyfya/4/

window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            title: {
                display:true,
                text:"Figure"
            },
            legend: {
                position: "bottom"
            },
            tooltips: {
                mode: 'label',
                bodySpacing: 10,
                cornerRadius: 0,
                titleMarginBottom: 15
            },
            scales: {
                xAxes: [{
                    ticks: {}
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        stepSize: 500000
                    }
                }]
            },
            responsive: true
        }
    });
};

Answer 1

The Fix

Assign a function into userCallback when creating the config object. This gets called when creating the tick marks. You can find documentation at Chart.js at the bottom of Scales Documentation

Example fiddle with the fix

yAxes: [{
    ticks: {
        beginAtZero: true,
        stepSize: 500000,

        // Return an empty string to draw the tick line but hide the tick label
        // Return `null` or `undefined` to hide the tick line entirely
        userCallback: function(value, index, values) {
            // Convert the number to a string and splite the string every 3 charaters from the end
            value = value.toString();
            value = value.split(/(?=(?:...)*$)/);

            // Convert the array to a string and format the output
            value = value.join('.');
            return '€' + value;
        }
    }
}]

Answer 2

For those using Version: 2.5.0, here is an enhancement. With this, you can also format the amounts in tooltips of the chart, not only the 'ticks' in the 'yAxes'

...
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                callback: function(value, index, values) {
                    return '$ ' + number_format(value);
                }
            }
        }]
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, chart){
                var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                return datasetLabel + ': $ ' + number_format(tooltipItem.yLabel, 2);
            }
        }
    }
}

Here is the number_format() function what I am using:

function number_format(number, decimals, dec_point, thousands_sep) {
// *     example: number_format(1234.56, 2, ',', ' ');
// *     return: '1 234,56'
    number = (number + '').replace(',', '').replace(' ', '');
    var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

Answer 3

Instead a new function you can use a native javascript NumberFormat

        yAxes: [{
      ticks: {
        beginAtZero: true,
        callback: function(value, index, values) {
                return '€ ' + Intl.NumberFormat().format((value/1000)) + 'K';
            }
      }
    }]
        //2000000 => € 2,000K