ElementStacks

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var perShapeGradient = {
            x1: 0,
            y1: 0,
            x2: 1,
            y2: 0
        };

var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr']
        },
        colors: [{
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(247, 111, 111)'],
                [1, 'rgb(220, 54, 54)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(120, 202, 248)'],
                [1, 'rgb(46, 150, 208)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(136, 219, 5)'],
                [1, 'rgb(112, 180, 5)']
                ]}, 
        ],
    
        series: [
            {data: [29.9, 71.5, 106.4, 129.2]},
            {data: [71.5, 106.4, 129.2, 144.0]},
            {data: [106.4, 129.2, 144.0, 176.0]}
        ]
});