Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

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

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-point {
	stroke: white;
}

.highcharts-graph.zone-0 {
	stroke: #f7a35c;
}
.highcharts-area.zone-0 {
	fill: #f7a35c;
}
.highcharts-point.zone-0 {
	fill: #f7a35c;
}
.highcharts-graph.zone-1 {
	stroke: #7cb5ec;
}
.highcharts-area.zone-1 {
	fill: #7cb5ec;
}
.highcharts-point.zone-1 {
	fill: #7cb5ec;
}
.highcharts-graph.zone-2 {
	stroke: #90ed7d;
}
.highcharts-area.zone-2 {
	fill: #90ed7d;
}
.highcharts-point.zone-2 {
	fill: #90ed7d;
}

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Styled color zones'
    },

    yAxis: {
        min: -10
    },

    plotOptions: {
        series: {
            zones: [{
                value: 0,
                className: 'zone-0'
            }, {
                value: 10,
                className: 'zone-1'
            }, {
                className: 'zone-2'
            }],
            threshold: -10
        }
    },

    series: [{
        type: 'areaspline',
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5]
    }, {
        type: 'column',
        data: [1, 13, 2, -4, 6, 7, 5, 3, 2, -1, 2]
    }]
});