Highcharts DateTime Chart

This demonstrates how to display a datetime data using a line chart

by Ryan Brackett

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'DateTime chart',
            align: 'left'
        },
        xAxis: {
            type: 'datetime' 
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true
            }
        },
        series: [{
            name: 'Tokyo',
            data: [
                [date("2020-04-01 00:00:00"), 7.0],
                [1412199980000, 6.9],
                [1412200580000, 9.5],
                [1412200880000, 14.5],
                [1412201180000, 18.4],
                [1412201480000, 21.5],
                [1412201780000, 25.2],
                [1412202080000, 26.5],
                [1412202380000, 23.3],
                [1412202680000, 18.3],
                [1412202980000, 13.9],
                [1412203280000, 9.6]
            ]
        }]
    });
});