Highcharts: Column Line Combo

by akaimo

HTML

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

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

JavaScript

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

var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        colors: [{
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(0, 200, 90)'],
                [1, 'rgb(102, 255, 153)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(166, 166, 166)'],
                [1, 'rgb(191, 191, 191)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(64, 64, 64)'],
                [1, 'rgb(89, 89, 89)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(149, 55, 53)'],
                [1, 'rgb(192, 80, 77)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(0, 200, 90)'],
                [1, 'rgb(102, 255, 153)']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, 'rgb(0, 200, 90)'],
                [1, 'rgb(102, 255, 153)']
                ]
            },
        ],
        title: {
            text: "Column Line Combo"
        },
        xAxis: {
            categories: [
                "Cat 1",
                "Cat 2",
                "Cat 3"],
        },
        yAxis: {
            title: {
                text: 'USD'
            }
        },
         plotOptions: {
                column: {
                    stacking: 'normal',
                }
            },
        series: [{
            name: "Revenue",
            data: [
            49.9,
            71.5,
            160.4],
            type: "column"
        }, {
            name: "Cost",
            data: [
         ...