[Chartjs]-Y axis Formatting with Metric prefix 1000=> 1k Chart.js

by

15👍

✅

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>

Leave a comment