Highcharts Demo

author(s): Torstein Hønsi

by Jayson Buquia

HTML

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

<div id="container"></div>

CSS

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

#container {
	height: 400px;
	max-width: 800px;
	min-width: 320px;
	margin: 0 auto;
}

/* Define the stop colors */
#gradient-0 stop {
	stop-color: #7cb5ec;
}
#gradient-0 stop[offset="0"] {
	stop-opacity: 0.75;
}
#gradient-0 stop[offset="1"] {
	stop-opacity: 0;
}
#gradient-1 stop {
	stop-color: #cccccc;
}
#gradient-1 stop[offset="0"] {
	stop-opacity: 0;
}
#gradient-1 stop[offset="1"] {
	stop-opacity: 0.25;
}

/* Apply the gradients */
.highcharts-plot-background {
	fill: url(#gradient-1);
}
.highcharts-color-0 .highcharts-area {
	fill-opacity: 1;
	fill: url(#gradient-0);
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Gradients in styled mode'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    defs: {
        gradient0: {
            tagName: 'linearGradient',
            id: 'gradient001',
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1,
            children: [{
                tagName: 'stop',
                offset: 0
            }, {
                tagName: 'stop',
                offset: 1
            }]
        },
    },

    series: [{
        type: 'area',
        keys: ['y', 'selected'],
        data: [
            [29.9, false],
            [71.5, false],
            [106.4, false],
            [129.2, false],
            [144.0, false],
            [176.0, false],
            [135.6, false],
            [148.5, false],
            [216.4, true],
            [194.1, false],
            [95.6, false],
            [54.4, false]
        ]
    }]
});