Highcharts Demo

author(s): Torstein Hønsi

by Umair Rafiq

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Column chart with color axis'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    colorAxis: {
        min: -10,
        max: 10
    },
    series: [{
        type: 'bubble',
        colorKey: 'colorValue',
        name: 'Jane',
        data: [{
            y: 3,
            colorValue: -3
        }, {
            y: 1,
            colorValue: -10
        }, {
            y: 3,
            colorValue: 0
        }, {
            y: 4,
            colorValue: 10
        }]
    }, {
        type: 'column',
        colorKey: 'colorValue',
        name: 'John',
        data: [{
            y: 2,
            colorValue: -11
        }, {
            y: 3,
            colorValue: 29
        }, {
            y: 5,
            colorValue: -16
        }, {
            y: 7,
            colorValue: 23
        }, {
            y: 6,
            colorValue: 5
        }]
    }]
});