Adding gap between specific bars in a stacked bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Adding gap between specific bars in a stacked bar 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.8.3.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//  w  w w.  jav a  2s. c  om
function custom() {
    var chart;
    $(function() {
         new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar',
        },
        title: {
            text: 'Grouping test',
        },
        xAxis: {
            categories: [ '1','2','3','4','','A', 'B', 'C', ]
        },
   plotOptions: {
            series: {
            stacking: 'percent'
        }
    },
    series: [
    {
        name: 'Alpha',
        data: [31,27,23,22,null,22,20,21]
    }, {
        name: 'Omega',
        data: [5,6,7,5,null,6,6,5,]
    } ,{
        name: 'Gamma',
        data: [60,62,67,69,null,68,70,71]
    }
     ]
});   });
}
custom();
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials