Highcharts Stacked Grouped Column Chart
The following example demonstrates a stacked grouped column chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations. Add the stacking property in plotOptions:
Configuration
plotOptions: Data Point Options
plotOptions is used to set properties related to data points in the chart. The properties in plotOptions vary slightly depending on the chart type.
Configure chart stacking by setting plotOptions.area.stacking to "percent". If you want to disable stacking, use null.
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
Series Data Configuration
Configure each corresponding data series in the stacked group.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}]
Example
Filename: highcharts_column_rotated.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://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>
The above example outputs the following result: