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

$(function () {
    var perShapeGradient = {
            x1: 0,
            y1: 0,
            x2: 1,
            y2: 0
        };
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        colors: [{
            linearGradient: perShapeGradient,
            stops: [
                [0, '#ffce9e'],
                [1, '#FFD8B1']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#ffb164'],
                [1, '#FFC183']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#e79c50'],
                [1, '#ECB073']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#ff7f00'],
                [1, '#FF9933']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#e77300'],
                [1, '#EC8F33']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#a85400'],
                [1, '#B97633']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#592c00'],
                [1, '#7A5633']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#333333'],
                [1, '#555555']
                ]
            }, {
            linearGradient: perShapeGradient,
            stops: [
                [0, '#777777'],
                [1, '#999999']
                ]
            },
        ],
        title: {
            text: "Column Line Combo"
        },
        xAxis: {
            categories: [
                "Cat 1",
                "Cat 2",
                "Cat 3"],
        },
        yAxis: {
            title: {
                text: 'USD'
   ...