Highcharts Stacked Area Chart
The following example demonstrates a stacked area chart.
We have already learned about 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 of plotOptions vary slightly depending on the chart type.
Configure chart stacking by setting plotOptions.area.stacking to "normal". Disable stacking by using null. If the value is "percent", stacking is done by percentage.
var plotOptions = {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};
Example
Filename: highcharts_area_stacked.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: 'area'
};
var title = {
text: 'Historic and Estimated Worldwide Population Growth by Region'
};
var subtitle = {
text: 'Source: Wikipedia.org'
};
var xAxis = {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
};
var yAxis = {
title: {
text: 'Billions'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
};
var tooltip = {
shared: true,
valueSuffix: ' millions'
};
var plotOptions = {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The above example will output the following result: