Chapter 3: Plotting Area with Scatter Chart (1)

Two series: area spline and scatter

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',
            backgroundColor: '#EAEAEA'
        },
        title: {
            text: 'Population ages out of total (%) - Japan ',
            margin: 40,
            align: 'right',
            style: {
                fontFamily: 'palatino'
            }
        },
        credits: {
            position: {
                align: 'left',
                x: 20
            },
            text: 'Data from The World Bank'
        },
        yAxis: {
            title: {
                text: '(%)',
                rotation: 0,
                x: 10,
                y: 5,
                align: 'high'
            },
            opposite: true,
            gridLineWidth: 0,
            lineWidth: 1,
            maxPadding: 0.09
        },
        xAxis: {
            labels: {
                // To avoid calling Highcharts.numberFormat
                formatter: function() {
                    return this.value;
                }
            },
            lineColor: '#CC2929',
            lineWidth: 4,
            tickWidth: 0,
            maxPadding: 0.02,
            offset: 2
        },
        plotOptions: {
            areaspline: {
                marker: {
                    enabled: false
                }
            },
            scatter: {
                marker: {
                    symbol: 'circle',
                },
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {},
        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'],
               ...