Highcharts Demo

author(s): Torstein Hønsi

by smeijers

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>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Predicted margin'
    },
    },
    xAxis: {
        categories: [0,25,50,75,100,125,150,175,200,225,250,275,300,325,350,375,0,25,50,75,100,125,150,175,200,225,250,275,300,325,350,375]
    },
    yAxis: {
        title: {
            text: 'Predicted margin'
        },
        labels: {
            formatter: function () {
                return this.value;
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 0,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: 'Herd average',
        data: [-1.2, 1.3, 3.6, 5.5, 7.8, 7.6, 7.4, 6.1, 5.6, 4.3, 4.1, 3.1,2.1,0,-1.2,-1.2,
        -1.2, 1.3, 3.6, 5.5, 7.8, 7.6, 7.4, 6.1, 5.6, 4.3, 4.1, 3.1,2.1,0,-1.2,-1.2]

    }, {
        name: 'Predicted',
        data: [-1.2, 1.3, 3.6, 5.5, null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]
    },
    {
        name: 'PredictedHerd',
        lineColor: '#444444',
        dashStyle: 'Dot',
        data: [ null,null,null,null,7.6, 7.4, 6.1, 5.6, 4.3, 4.1, 3.1,2.1,0,-1.2,-1.2,
        -1.2, 1.3, 3.6, 5.5, 7.8, 7.6, 7.4, 6.1, 5.6, 4.3, 4.1, 3.1,2.1,0,-1.2,-1.2]
    }]
});