Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

All graphs should be displayed in local time (useUTC:false)<hr><br>

Tooltip shows "Month" formatting correctly, but point starts on the wrong date:
<div id="container1" style="height: 400px"></div>

Point starts on correct day but shows "day" formatting instead of "Month" formatting:
<div id="container2" style="height: 400px"></div>

Example including time of day, which requires useUTC: false in order to make sense
<div id="container3" style="height: 400px"></div>

JavaScript

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

var series = [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4]
}];


$('#container1').highcharts({
    xAxis: { type: 'datetime' }, 
    plotOptions: {
        series: {
            pointStart: moment.utc('2013-11-01').valueOf(), // midnight (UTC) of Dec 1
            pointInterval: 31*24*60*60*1000
        }
    },
    series: series
});

$('#container2').highcharts({
    xAxis: { type: 'datetime' }, 
    plotOptions: {
        series: {
            pointStart: moment('2013-12-01').valueOf(), // midnight (local time) of Dec 1
            pointInterval: 24*60*60*1000
        }
    },
    series: series
});

$('#container3').highcharts({
    xAxis: { type: 'datetime' }, 

    plotOptions: {
        series: {
            pointStart: moment('2013-12-01T05:00:00').valueOf(), // 5am local time
            pointInterval: 60*60*1000
        }
    },
    series: series
});