Chart.js time based data aligning with X axis - Javascript Chart.js

Javascript examples for Chart.js:Axis

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

Description

Chart.js time based data aligning with X axis

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   www.  j a v a2s. c o  m
$(document).ready(function(){
   var config = {
      type: 'bar',
      data: {
         labels: [
        new Date('2016-11-30'), 
        new Date('2017-04-01'), 
        new Date('2017-06-30') 
       ],
         datasets: [{
            label: 'Contacts',
            backgroundColor: 'red',
            data: [
          1,
          5,
          7
        ]
         }]
      },
      options: {
         scales: {
            yAxes: [{
               ticks: {
                  beginAtZero:true,
                  stepSize:1
               }
            }],
            xAxes: [{
               type: 'time',
               barThickness:2,
               time: {
                  unit: 'month'
               }
            }]
         }
      }
   };
   var Canvas = $("#Chart");
   var cc = new Chart(Canvas, config);
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="Chart"></canvas>  
   </body>
</html>

Related Tutorials