y axis Formatting with Metric prefix 1000=> 1k Chart.js

Question

I'm using Chart.js to generate a bar chart that shows currency values. By default the y-axis labels use metric prefixes for abbreviation, e.g. 1k is displayed instead of 1000 and 1M instead of 1000000.

I have tried this code but it shows only the currency symbol but my number still like 1000000 formats!

this is the code what I have tried.

 yAxes: [{

              ticks: {
                 display: true,
                 beginAtZero: false,
                callback: function (value, index, values) {
                            if (parseInt(value) >= 1000) {
                           return '$' + value  ;
                           } else {
                        return value;
                         }
                         }
                       },
                          gridLines: {
                               show: true,

                             }
                       }],

thanks

Answer 1

You can accomplish this using the following y-axis ticks callback function ...

yAxes: [{
   ticks: {
      stepSize: 100000,
      callback: function(value) {
         var ranges = [
            { divider: 1e6, suffix: 'M' },
            { divider: 1e3, suffix: 'k' }
         ];
         function formatNumber(n) {
            for (var i = 0; i < ranges.length; i++) {
               if (n >= ranges[i].divider) {
                  return (n / ranges[i].divider).toString() + ranges[i].suffix;
               }
            }
            return n;
         }
         return '$' + formatNumber(value);
      }
   }
}]

You would also need to add some padding to the left of the chart, so that, the y-axis labels fits properly to the view ...

layout: {
   padding: {
      left: 10
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ctx = document.getElementById('c').getContext('2d');
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Profit',
         data: [666666, 777777, 888888, 999999, 1100000],
         backgroundColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
         borderColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
         borderWidth: 1
      }]
   },
   options: {
      legend: { display: false },
      responsive: false,
      layout: {
         padding: {
            left: 10 //set as you wish
         }
      },
      scales: {
         yAxes: [{
            ticks: {
               stepSize: 100000,
               callback: function(value) {
                  var ranges = [
                     { divider: 1e6, suffix: 'M' },
                     { divider: 1e3, suffix: 'k' }
                  ];
                  function formatNumber(n) {
                     for (var i = 0; i < ranges.length; i++) {
                        if (n >= ranges[i].divider) {
                           return (n / ranges[i].divider).toString() + ranges[i].suffix;
                        }
                     }
                     return n;
                  }
                  return '$' + formatNumber(value);
               }
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c" width="350" height="200"></canvas>