Chapter 3: Plotting Chart with Missing Data (2)
Two areaspline series are stacked together. One of the series has missing data.
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>
JavaScript
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
spacingBottom: 30,
backgroundColor: '#EAEAEA'
},
title: {
text: 'Population ages out of total (%) - Japan ',
margin: 40,
align: 'right',
style: {
fontFamily: 'palatino'
}
},
credits: {
position: {
align: 'left',
x: 20
},
href: 'http://www.worldbank.org',
text: 'Data from The World Bank'
},
yAxis: {
title: {
text: '(%)',
rotation: 0,
x: 10,
y: 5,
align: 'high'
},
opposite: true,
gridLineWidth: 0,
lineWidth: 1,
},
xAxis: {
labels: {
// To avoid calling Highcharts.numberFormat
formatter: function() {
return this.value;
}
},
lineColor: '#CC2929',
lineWidth: 4,
tickWidth: 0,
offset: 2
},
plotOptions: {
series: {
marker: {
enabled: false
}
},
areaspline: {
stacking: 'normal',
},
scatter: {
marker: {
symbol: 'circle',
lineColor: '#E65C00',
lineWidth: 1
},
dataLabels: {
enabled: true
}
},
},
series:...