Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

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

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

JavaScript

var config = {
		plotOptions: {
        series: {
            borderWidth: 0,
            groupPadding: .5,
            pointPadding: 0,
            pointWidth: 28
        }
    },
    series: [{
        name: 'firstCurrent',
        zIndex: 2,
        options: {
            type: 'prevColumn'
        },
        color: '#aaaaaa',
        data: [
            111,
            null
        ]
    }, {
        name: 'firstTotal',
        color: '#d9d9d9',
        options: {
            type: 'prevColumnFull'
        },
        zIndex: 1,
        data: [
            333,
            null
        ]
    }, {
        name: 'secondTotal',
        zIndex: 3,
        options: {
            type: 'currentColumnFullPlan'
        },
        color: '#d8edf6',
        data: [
            null,
            222
        ]
    }, {
        name: 'secondCurrent',
        zIndex: 4,
        options: {
            type: 'currentColumn'
        },
        color: '#7cb5ec',
        data: [
            null,
            444
        ]
    }],
    title: {
        text: null
    },
    credits: {
        enabled: false
    },
    chart: {
        height: 220,
        type: 'column',
        spacingTop: 32,
        spacingRight: 0,
        marginLeft: 0,
        marginBottom: 22,
    },
    legend: {
        enabled: false
    },
    yAxis: {
        maxPadding: 0.02,
        offset: 0,
        title: {
            rotation: 0,
            align: 'high',
            y: -21,
            margin: 0,
            style: {
                fontWeight: 'bold',
                fontSize: '15px'
            },
            text: '1',
            offset: 12,
            x: 0,
            textAlign: 'left',
        },
        labels: {
            x: -12,
            align: 'right',
            style: {
                fontSize: '12px',
            },
        },
        opposite: true,
        offset: 0,
        labels: {
            x: 12,
            align: 'left'
        }
   ...