Chart js - Formatting Y axis

Question

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     lt   value  gt    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

User · Answer

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.

User · Answer

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     lt    value       two        Number value    2      gt        jsFiddle example  if you wish to set a manual y scale you can use scaleOverride  var options               scaleLabel     lt    value       two        Number value    2      gt         scaleOverride  true      scaleSteps  10      scaleStepWidth  10      scaleStartValue  0       jsFiddle example

User · 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

User · Answer

scaleLabel     lt    Number value  toFixed 2  replace                   gt

User · Answer

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

User · Answer

Here you can find a good example of how to format Y-Axis value   Also  you can use scaleLabel     lt   value  gt   that you mentioned  It basically means that everything between  lt    and   gt  tags will be treated as javascript code  i e you can use if statments

[string-formatting] Chart.js - Formatting Y axis

Examples related to string-formatting

Examples related to chart.js