Highcharts Demo

author(s): Torstein Hønsi

by HemalathaThanigaivel

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: 'area',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2015, 0),
        pointIntervalUnit: 'month',
        zoneAxis: 'x',
        zones: [{
            value: Date.UTC(2015, 5),
            color: colors[2],
            fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[2]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0).get('rgba')]
                    ]
                }
        }, {
            value: Date.UTC(2015, 6),
            color: colors[5],
            fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[5]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(0).get('rgba')]
                    ]
                }
        }, {
            value: Date.UTC(2015, 8),
            color: colors[2],
            fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[2]],
                        [1,...