Multiple bar chart in time scale - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Multiple bar chart in time scale

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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

canvas { background-color : #eee;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){/* www.j  a va 2 s .  c om*/
var options = {
  type: 'bar',
  data: {
    datasets: [
       {
         label: 'First',
        backgroundColor: 'red',
         data: [{
          x:'2018-10-25',
          y:120
        }, {
          x:'2018-10-26',
          y:10
        }, {
          x:'2018-10-27',
          y:50
        }],
       },
         {
            label: 'Second',
        backgroundColor: 'green',
            data: [{
          x:'2018-10-25',
          y:100
        }, {
          x:'2018-10-26',
          y:120
        }, {
          x:'2018-10-27',
          y:30
        }],
         }
      ]
  },
  options: {
     scales: {
       xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'DD-MM-YYYY',
          },
        },
        gridLines: {
          offsetGridLines: true,
        },
            offset: true,
      }],
    }
  }
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
    }

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

Related Tutorials