Highcharts Demo

author(s): Torstein Hønsi

by Black Label

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: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

JavaScript

var data = [{
        'y': 10,
        'actualValue': 10
    },
    {
        'y': 20,
        'actualValue': 20
    },
    {
        'y': 0,
        'actualValue': -15
    },
    {
        'y': 10,
        'actualValue': 10
    },
    {
        'y': 0,
        'actualValue': -20
    },
    {
        'y': 10,
        'actualValue': 10
    },
    {
        'y': 0,
        'actualValue': -20
    },
    {
        'y': 15,
        'actualValue': 15
    }
]

Highcharts.chart('container', {
    tooltip: {
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.actualValue}</b><br/>'
    },
    series: [{
        name: 'a',
        keys: [{
            y: 'graphValue'
        }],
        data: data
    }]

});