Highcharts missing first date label on xAxis

Question

I have some problem with Highcharts chart. I want to make chart with datetime axis every one day, but Highcharts cuts off first date label on the x axis, it should start from today's date not tomarrow. Tooltip shows date fine though. Are there some Highcharts settings, that I missing to make it work? I would appreciate your help. Thanks.

Code:

var s = {
        min: 0,
        max: 50,
        totalPoints: 12
    };

function getRandomData() {
    var data  = [],
        date  = new Date().getTime(),
        res   = [],
        numb;

    for (var i = 0; i < s.totalPoints; i += 1) {
        if (i > 0) date += 24 * 3600 * 1000;
        numb = Math.floor(Math.random() * (s.max - s.min + 1) + s.min);
        res.push([date, numb]);
    }


    return res;
}


$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
        },

        xAxis: {
            type: 'datetime',
            tickInterval: 24 * 3600 * 1000
        },
        series: [{
            data: getRandomData()
        }]

    });
});

Live on: jsfiddle

Set showFirstLabel and showLastLabel as true (api.highcharts.com/highcharts) — Sebastian Bochan

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2014-07-07T18:11:30

To show the first and last tick while having points that are in between your ticks for datetime you can use xAxis.startOnTick and xAxis.endOnTick set to true.

I've updated your JFiddle as an example.

Highcharts missing first date label on xAxis

1 Answers