align x-ticks for line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

align x-ticks for line chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>ChartJS - Line chart with all options</title> 
   </head> 
   <body translate="no"> 
      <canvas id="myChart" width="1600" height="900"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> 
      <script>
var data = {//from   w ww .  j a  va2  s.c  o m
   labels: ["2012-02-02 12:03:11", "2012-02-02 12:12:11", "2012-02-02 13:10:11", "2012-02-02 14:22:11"],
    datasets: [
        {
            label: "My First dataset",
         type: 'line',
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81]
        },
    ]
};
var options = {
   scales: {
      xAxes: [{
         type: 'time',
         time: {
            unit: 'hour',
            unitStepSize: 0.5,
            displayFormats: {
               'hour': 'HH:mm'
            },
         },
         ticks:{
            maxTicksLimit: 20,
         },
      }],
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Loading'
         },
      }],
   },
};;
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx, {
   type: 'line',
   options: options,
   data: data
})
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials