Chart js data to start at zero in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Chart js data to start at zero in line chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js StartAtZero</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <style>

body{/*w w w  .j  av a  2s . co  m*/
   background-color: #666;
}
#chart{
   background-color: lightgrey;
   border-radius: 6px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10"> 
               <canvas id="chart"></canvas> 
            </div> 
            <div class="col-md-1"></div> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script>
var canvas = document.getElementById("chart");
var ctx = canvas.getContext('2d');
var data = {
        labels: ['February', 'March'],
        datasets: [
            {
                label: 'My First dataset',
                backgroundColor: 'rgba(255,99,132,0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                data: [5, 9]
            }
        ]
    };
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0
      }
    }]
  }
};

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
      </script>  
   </body>
</html>

Related Tutorials