Highcharts Demo

author(s): Torstein Hønsi

by Richard Houltz

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

var colors = Highcharts.getOptions().colors;

Highcharts.chart('container', {
    title: {
        text: 'Zones on X axis'
    },
    subtitle: {
        text: 'Colors signify periods of increase and decrease'
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        type: 'areaspline',
        data: [1,1,1,1,1,1, 1,1,1, 1,1,1],
        pointStart: Date.UTC(2015, 0),
        pointIntervalUnit: 'month',
        zoneAxis: 'x',
        zones: [ {
            value: Date.UTC(2015, 5),
            color: colors[6]
        }, {
            value: Date.UTC(2015, 8),
            color: colors[2]
        }, {
        value: Date.UTC(2015, 9),
            color: colors[5]
        }]
    }]
});