NickyTheWrench NickyTheWrench - 8 months ago 49
Javascript Question

Charts.js Formatting Y Axis with both Currency and Thousands Separator

I'm using Charts.js to show a graph on my site. Currently, the label shows as a long string of numbers (i.e 123456).
I want it to show as currency with thousands separator: (i.e $123,456)

I'm using the scaleLabel option to put a $ USD symbol before the value:

scaleLabel: "<%= ' $' + Number(value)%>"

and a function to insert the comma separator:

function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

I just do not know how to use these together to get what I want.

Here is the fiddle:

(please keep in mind that currently the graph will only work if you remove one of those two pieces of JavaScript cited above)

Thank you for any and all help.


You should be able to include currency prefix in composition of label inside function...

var options = {
    animation: false,
    function(label){return  '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}