ChartJS Bar chart with axis ticks - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

ChartJS Bar chart with axis ticks

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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  w  w  w . j a v a  2 s.co m
const RANGE = (a,b) => Array.from((function*(x,y){
  while (x <= y) yield x++;
})(a,b));
labels = [];
for(var ii = 0; ii < 170; ii++) {
  labels.push((1483228800 + ii * 3600) * 1000);
}
var startingData = {
  labels: labels,
  datasets: [
    {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      data: RANGE(1, 170),
      label: 'Data'
    },
  ]
};
var options = {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'hour',
        unitStepSize: 20
      }
    }]
  }
};
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myLiveChart = new Chart(ctx, {
  type: 'bar',
  data: startingData,
  options: options
});
    }

      </script> 
   </head> 
   <body>  
      <canvas id="chartJSContainer" width="600" height="400"></canvas>   
   </body>
</html>

Related Tutorials