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: 'spline'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    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: 'Margin'
        },
        labels: {
            formatter: function () {
                return this.value;
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: 'Average',
        marker: {
            symbol: 'square'
        },
        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',
        marker: {
            symbol: 'diamond'
        },
        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]
    }]
});