CODEWITHSUNDEEP
string-formattingchart.js
Pierre de LESPINAY
Pierre de LESPINAY

Reputation: 46188

Chart.js - Formatting Y axis

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 ?

Upvotes: 91

Views: 146610

Answers (8)

alex
alex

Reputation: 955

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, 
        },
    },
...
};

Upvotes: 1

Dexter
Dexter

Reputation: 9324

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

Upvotes: 12

anonymous
anonymous

Reputation: 159

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

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

Upvotes: 16

Jaison James
Jaison James

Reputation: 4552

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

Upvotes: 188

vicentedealencar
vicentedealencar

Reputation: 933

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

Upvotes: 15

jacobangel
jacobangel

Reputation: 6996

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.

Upvotes: 58

Stuart
Stuart

Reputation: 1237

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

Upvotes: 5

Nevercom
Nevercom

Reputation: 869

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

Upvotes: 2

Related Questions