Stacked and Grouped Column Chart

Following is an example of a stacked and grouped Column Chart.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Let us now see additional configurations and also how we have added stacking attribute in plotoptions.

An example of a stacked and grouped Column Chart is given below.

plotOptions

The plotOptions is a wrapper object for configurations objects for each series type. The configuration objects for each series can also be overridden for each series item as given in the series array. This is to stack the values of each series on top of each other. This is to stack the values of each series on top of each other.

Configure the stacking of the chart using plotOptions.column.stacking as "normal". Possible values are null which disables stacking, "normal" stacks by value and "percent" stacks the chart by percentages.

var plotOptions = {
   column: {
      stacking: 'normal',
      dataLabels: {
         enabled: true,
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
         style: {
            textShadow: '0 0 3px black'
         }
      }
   }
};

series

Configure the stack of each series to identity the group of the series.

series: [{
   name: 'John',
   data: [5, 3, 4, 7, 2],
   stack: 'male'
}]

Example

highcharts_column_stacked_grouped.htm

Live Demo 
<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'column'
            };
            var title = {
               text: 'Total fruit consumption, grouped by gender'   
            };    
            var xAxis = {
               categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            };
            var yAxis = {
               allowDecimals: false,
               min: 0,
               
               title: {
                  text: 'Number of fruits'
               }     
            }; 
            var plotOptions = {
               column: {
                  stacking: 'normal'        
               }
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: 'John',
                  data: [5, 3, 4, 7, 2],
                  stack: 'male'
               }, 
               {
                  name: 'Joe',
                  data: [3, 4, 4, 2, 5],
                  stack: 'male'
               }, 
               {
                  name: 'Jane',
                  data: [2, 5, 6, 2, 1],
                  stack: 'female'
               }, 
               {
                  name: 'Janet',
                  data: [3, 0, 4, 4, 3],
                  stack: 'female'
               }
            ];     
      
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.plotOptions = plotOptions;
            json.credits = credits;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_column_charts.htm
Advertisements