Highcharts Demo

author(s): Torstein Hønsi

by Jayson Buquia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<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

console.log(moment().hours(20).minutes(50).format('h:mma'));

Highcharts.chart('container', {

		chart: {
    	marginRight: 50,
    },

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

    xAxis: {
    		labels: {
        	formatter() {
          	console.log(this);
          	return this.value;
					}
        },
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    yAxis: {
    	opposite: true,
    	labels: {
      	align: 'right',
        reserveSpace: true,
        x: -50
      }
		},
    
    plotOptions: {
    	series: {
      	marker: {
        	enabled: false,
        }
			}
    },

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

    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]
        ]
    }]
});