Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column',
        renderTo: '#container'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        plotLines: [{
        	value: 10,
            width: 2,
            dashStyle: "Dash",
            color: 'black',
            
        }],
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',

        }
    },
    series: [{
            name: 'John',
            borderColor: '#0000FF',
            color: '#FFFFFF',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            borderColor: '#0000FF',
            color: '#0000FF',
            data: [2, 2, 3, 2, 1]
        },
        {

            //5-width
            //height 
            data: [
                [4, 10],
                [0, 10]
            ],
            lineWidth: 2,
            dashStyle: "Dash",
            lineColor: 'black',
            type: 'scatter',
            marker: {
                enabled: false
            },
            showInLegend: false,
            enableMouseTracking: false
        },
        {
            data: [
                [0, 20]
            ],
            lineWidth: 2,
            dashStyle: "Dash",
            lineColor: 'black',
            type: 'scatter',
            marker: {
                enabled: false
            },
            showInLegend: false,
            enableMouseTracking: false
        }
    ]
});