Make y axis only integer scaling in ChartJS - Javascript Chart.js

Javascript examples for Chart.js:Axis

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

Description

Make y axis only integer scaling in ChartJS

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>bar chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//w  ww .j  ava2 s . co  m
var columnChart = document.getElementById("columnChart").getContext('2d');
var myChart = new Chart(columnChart, {
    type: 'bar',
    data: {
        labels: ['Change Request (Approved)', 'Assigned', 'Investigating', 'Ready for testing', 'Client Testing'],
        datasets: [{
            label: 'My Open Case',
            data: [0, 1, 0, 0, 0],
            backgroundColor: "rgba(255,153,0,1)"
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{
                ticks: {
                    stepSize: 1
                },
                gridLines: {
                    display: false
                }
            }]
        }
    }
});
    }

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

Related Tutorials