show a column with the value Zero in Column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

show a column with the value Zero in Column chart

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
data: fixed = [3, 5, 5, 8];/*from w  ww . j a  v a2s .  co  m*/
data: assigned = [0, 1, 0, 0];
data: Reopened = [3, 5, 5, 8];
data: closed = [1, 1, 1, 1];
$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'column chart'
            },
            xAxis: {
                categories: ['Person A', 'Person B', 'Person C', 'Person D'],
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Bugs'
                }
            },
            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        color: 'gray'
                    }
                }
            },
            series: [{
                name: 'Fixed bugs',
                data: fixed,
                pointWidth: 40},
            {
                name: 'Assigned Bugs',
                data: assigned,
                pointWidth: 40},
            {
                name: 'Re-Opened Bugs',
                data: Reopened,
                pointWidth: 40},
            {
                name: 'Closed Bugs',
                data: closed,
                pointWidth: 40}]
        });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials