Highcharts Demo

author(s): Torstein Hønsi

by Guillaume Seguin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

Highcharts.setOptions({
    lang: {
        months: ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli',
            'august', 'september', 'oktober', 'november', 'desember'],
        weekdays: ['sundag', 'm�ndag', 'tysdag', 'onsdag', 'torsdag', 'fredag', 'laurdag']
    },
    colors: ['#DF5353', '#aaeeee', '#ff0066', '#eeaaee', '#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee']
});
Highcharts.chart('container', {
    chart: {
        borderColor: '#4572A7',
        plotBorderWidth: 1,
        plotBorderColor: '#CCCCCC',
        backgroundColor: '#222',
        plotShadow: true,
        type: 'spline'
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        lineWidth: 1,
        lineColor: '#CCCCCC',
        tickPixelInterval: 80,
        tickLength: 5,
        tickWidth: 1,
        tickColor: '#FFFFFF',
        tickPosition: 'outside', // 'inside' or 'outside'
        gridLineWidth: 1,
        gridLineColor: '#444444',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%b', this.value);
            },
            align: 'left',
            x: 3
        },
        plotLines: [{
            value: Date.UTC(1971, 0, 1),
            color: '#444444',
            width: 3
        }],
        dateTimeLabelFormats: { // TODO: should this be a language setting as well?
            weekly: '%e. %b %y',
            twicemonthly: '%e. %b %y',
            monthly: '%b %y',
            twomonths: '%b %y',
            threemonths: '%b %y',
            fourmonths: '%b %y',
            sixmonths: '%b %y',
            yearly: '%Y'
        },
        showFirstLabel: true,
        showLastLabel: false,
        minRange: 30 * 24 * 3600 * 1000,
        startOnTick: true,
        endOnTick: true
    },
    yAxis: {
        min: 0, //0,
        max: 3.5,
        lineWidth: 1,
        lineColor: '#CCCCCC',
      ...