By stacking the area charts, one can easily compare the series in a proportional or total format. Stacking can be applied to all or some of the series in the charts.
Consider the following data of the past 4 years showing the production of iron ore by major mining countries:
(function() {
$( '#chart_container' ).highcharts({
chart: {
type: 'area'
},
title: {
text: 'Iron Ore Production'
},
xAxis: {
tickmarkPlacement: 'on',
categories: [2010, 2011, 2012, 2013]
},
yAxis: {
title: {
text: 'in million metric tons'
}
},
series: [{
name: 'China',
data: [1070, 1330, 1310, 1320]
}, {
name: 'Australia',
data: [433, 488, 521, 530]
}, {
name: 'Brazil',
data: [370, 373, 398, 398]
}, {
name: 'India',
data: [230, 240, 144, 150]
}, {
name: 'Russia',
data: [101, 100, 105, 102]
}]
});
})();This code will produce the following area chart with four series. Though not stacked at the moment, it simply shows how area charts can visualize quantitative data with multiple series:
To turn on the stacking, we need to modify the plotOptions component as shown in the following code; we tackled the same component in Chapter 2, Column and Bar Charts:
plotOptions: {
area: {
stacking: 'normal'
}
}This modification of the plotOptions component will cause the series in the chart to stack on top of each other, as shown in the following screenshot:
Highcharts allows us to modify the color and opacity of an individual series by passing a color value in the color property.
Modify the series to have custom colors for their components:
series: [{
name: 'China',
data: [1070, 1330, 1310, 1320],
color: '#d62f2f'
}, {
name: 'Australia',
data: [433, 488, 521, 530],
color: '#1347f0'
}, {
name: 'Brazil',
data: [370, 373, 398, 398],
color: '#4b8303'
}, {
name: 'India',
data: [230, 240, 144, 150],
color: '#d0710b'
}, {
name: 'Russia',
data: [101, 100, 105, 102],
color: '#6b1bef'
}]Doing so will change the colors of the series from default presets to the values provided:
Setting the color property changes the color of all the components of the series, including the fill area and line. To set different colors to area and line, use the fillColor and lineColor properties on individual series, as shown in the following code:
{
name: 'China',
data: [1070, 1330, 1310, 1320],
color: '#f25555',
fillColor: '#d62f2f',
lineColor: '#a62424'
}The preceding code will cause the China series to have different colors for the area, line, and other components, as shown in the following screenshot:
We can also change the opacity of individual series by passing a value from 0 to 1 to the fillOpacity property. This feature comes in handy when you want to display data points behind other series in nonstacked charts:
{
name: 'China',
data: [1070, 1330, 1310, 1320],
color: '#f25555',
lineColor: '#a62424',
fillOpacity: 0.25
}This will give the following result: