Chapter 3: Stacked Area Chart (2)

Stacked two area spline series on top of each other. The third area spline is not stacked

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
                  },
                  stacking: 'normal'
                }
            },
            series: [{
                name: 'Ages 65 and over',
                type: 'areaspline',
                lineColor: '#145252',
                pointStart: 1980,
                fillColor: {
                   linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                   stops:[[ 0.0, '#248F8F'] ,
                            [ 0.7, '#70DBDB' ],
      ...