keeping stacked columns borderWidth and removing stacking gap for stacked column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

keeping stacked columns borderWidth and removing stacking gap for stacked 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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//from w w w.  j av a2s  .c  om
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
            plotLines: [{
               value: 0.5,
              width: 1,
              color: 'white',
              zIndex: 5
            }, {
               value: 1.5,
              width: 1,
              color: 'white',
              zIndex: 5
            }, {
              value: 2.5,
              width: 1,
              color: 'white',
              zIndex: 5
            }, {
              value: 2.5,
              width: 1,
              color: 'white',
              zIndex: 5
            }, {
              value: 3.5,
              width: 1,
              color: 'white',
              zIndex: 5
            }]
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                borderWidth: 0,
                groupPadding: 0,
                pointPadding: 0
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

      </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="height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials