Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
    series: [{
        data: [1, 50, 100, 200]
    }, {
        data: [70, 70, 70, 70],
        showInLegend: false,
        lineWidth: 0.5,
        color: 'transparent',
        marker: {
            radius: 0
        },
        tooltip: {
            pointFormat: 'plotLine1'
        }
    }, {
        data: [180, 180, 180, 180],
        showInLegend: false,
        color: 'transparent',
        marker: {
            radius: 0
        },
        tooltip: {
            pointFormat: 'plotLine2'
        }
    }],
    yAxis: {
        plotLines: [{
                value: 70,
                width: 1,
                color: '#68AF46',
                label: {
                    style: {
                        color: '#FE7246',
                        fontWeight: 'bold'
                    },
                    text: '70',
                    align: 'right',
                    x: -10,
                    y: 16
                },
            },
            {
                value: 180,
                width: 1,
                color: '#FE7246',
                label: {
                    text: '180',
                    align: 'right',
                    style: {
                        color: '#FE7246',
                        fontWeight: 'bold'
                    },
                },
            }
        ]
    }
});