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

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

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

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    lt    Number value  toFixed 2  replace                   gt   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

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

scaleLabel     lt    Number value  toFixed 2  replace                   gt

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

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

Examples related to string-formatting

Examples related to chart.js