Highcharts max interval for dateTime in x-axis?

Question

I have a daily graph, spanning across 00:00 to 23:59. but for live data, let's say currently is 9AM, by default it will stretch the graph from 00:00 - 09:00, which doesn't look nice to me. What I want is the x-axis max at 23:59 of the same day, so it will show 09:00 - 23:59 as blank. I tried $graph["xAxis"]["max"] = (time()+86400)*1000 but without avail. any suggestion? thanks!

Answer 1

(Although this is an old question, I came here using google search and it is still very much at the top of search results when searching for max time for x axis in highcharts, so I think this comment is still useful.)

The accepted answer may be true for older versions of highcharts, but in the current version (v3.0.7) you can also set the xAxis.max attribute to the datetime you want the graph to end on. This would look like this, and is IMO a way cleaner solution:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            type: 'datetime',
            max: Date.UTC(2010, 0, 2),
            dateTimeLabelFormats: {
                day: '%e of %b'   
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 1 * 3600 * 1000 // one hour
        }]
    });
});

See this jsfiddle example .

Answer 2

Highcharts will only show the last data point that is specified. If you want to force it to show the 0900 - 23:59 you will have to pass it all the data points for the those times you want displayed, but for the value pass null . Here is an example: jsfiddle example .

Once the data points go over the hour range it will automatically format the datatime labels differently. You may want to control the formatting of the data labels via dateTimeLabelFormats .

Answer 3

As stated in a previous answer, by default,

Highcharts will only show the last data point that is specified.

However, as you can see on default jsfiddle for min max setting , you have to specify both in addition to min and max that endOnTick and startOnTick are false. Moreoever, when dealing with missing data on datetime types, you'd to set ordinal to false in order to let space for empty data.

It means that your xAxis should look like below:

xAxis : {
    allowDecimals : false,
    endOnTick : false,
    max : /** Date in timestamp for the end the day */,
    min : /** Date in timestamp for the beginning the day */,
    ordinal : false,
    startOnTick : false,
    type : 'datetime'
},