Shorten number labels in Charts.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Shorten number labels in Charts.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  w  w .  j  a  v a  2s .  c  om*/
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My Test dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [28000000, 30000000, 25000000, 32000000, 20000000, 30000000, 35000000],
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Shorthand the millions
                    callback: function(value, index, values) {
                        return value / 1e6 + 'M';
                    }
                }
            }]
        }
    }
});
    }

      </script> 
   </head> 
   <body>   
      <meta name="viewport" content="width=device-width"> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>   
      <canvas id="myChart"></canvas>    
   </body>
</html>

Related Tutorials