Show bar with zero value in ChartJs - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Show bar with zero value in ChartJs

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://code.jquery.com/jquery-2.2.3.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w  ww  .j a  va2s. c om*/
var config = {
    type: 'bar',
    data: {
        labels: [
            "2016-04-23",
            "2016-04-24",
            "2016-04-25",
            "2016-04-26",
        ],
        datasets: [{
                label: "2016",
                    backgroundColor: "rgba(255,255,255,0.5)",
                    borderColor: "rgba(0,114,188,1)",
                    borderWidth: 4,
                    data: [2, 0.1, 3, 1]
        }],
        borderWidth: 2
    },
    options: {
        scales: {
            yAxes: [
                {
                     display: false,
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                         suggestedMin: 0
                    }
                }
            ],
            yAxes: [
                {
                     display: false,
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                         suggestedMin: 0
                    }
                }
            ]
        },
    }
};
new Chart($('canvas'), config);
    }

      </script> 
   </head> 
   <body> 
      <canvas></canvas>  
   </body>
</html>

Related Tutorials