Format Scale Numbers in Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Format Scale Numbers in Chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart.js formatted tick labels</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from ww w. j  a v  a  2s  . c o  m*/
var ctx = document.getElementById("myChart"),
  data = {
    labels: ['First', 'Second', 'Third', 'Fourth'],
    datasets: [{
      label: 'Sample',
      data: [2982, 1039, 3200, 2300],
      backgroundColor: "rgba(90, 150, 220, 0.85)",
      borderColor: "rgba(70, 120, 180, 1)",
      borderWidth: 2
    }],
  },
  options = {
    scales: {
      yAxes: [{
        ticks: {
          callback: function(value) {
            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        }
      }]
    }
  };
chart_trans_hari = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" style="width:400px; height:400px;"></canvas>  
   </body>
</html>

Related Tutorials