Highcharts Demo

author(s): Torstein Hønsi

by allusis

HTML

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

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

CSS

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

JavaScript

Highcharts.chart('container', {

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },

    yAxis: {
        title: {
            text: 'Range'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
		tooltip: {
        headerFormat: '<b>{point.x:%e %b 20%y}</b><br>',
        pointFormat: '{point.y:f} mg dL'
    },
    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        },
        line: {
         	dataLabels: {
             enabled: true
         	}
      	}	
    },

    series: [{
        name: 'mg dL',
        // Define the data points. All series have a dummy year
        // of 1970/71 in order to be compared on the same x axis. Note
        // that in JavaScript, months start at 0 for January, 1 for February etc.
        data: [
            [Date.UTC(2010, 2, 21), 310],
            [Date.UTC(2010, 3, 4), 314],
            [Date.UTC(2010, 4, 9), 230],
            [Date.UTC(2011, 7, 27), 240],
            [Date.UTC(2011, 11, 2), 300],
            [Date.UTC(2012, 11, 26), 290],
            [Date.UTC(2013, 5, 29), 360],
            [Date.UTC(2014, 5, 11), 400],
            [Date.UTC(2015, 7, 26), 340]
        ]
    }]

});