Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

CSS

#container {
	min-width: 320px;
	height: 400px;
	margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    xAxis: [{
        categories: ['Actual', 'Plan', 'Duration'],
    }],
    yAxis: [{
        title: {
            text: 'Units',
        },
    }, {
        title: {
            text: 'Hours',
        },
        labels: {
            format: '{value} h',
        },
				opposite: true
    }],
    plotOptions: {
        column: {
            stacking: 'normal',
        }
    },
    series: [{
        name: 'Run Duration',
        type: 'column',
        yAxis: 1,
        data: [0, 0, 100],

    }, {
        name: 'Downtime Duration',
        type: 'column',
        yAxis: 1,
        data: [0, 0, 200],

    }, {
        name: 'Idle Duration',
        type: 'column',
        yAxis: 1,
        data: [0, 0, 50],
    }, {
        name: 'Setup Duration',
        type: 'column',
        yAxis: 1,
        data: [0, 0, 200],
    }, {
        name: 'Plan',
        type: 'column',
        data: [0, 300, 0],
    }, {
        name: 'Actual',
        type: 'column',
        data: [100, 0, 0],
    }]
});