The maximum maximum interval for dateTime on the x axis?

Question

I have a daily chart covering from 00:00 to 23:59. but for real-time data, let's say it is currently 9am, by default it will stretch the graph from 00:00 to 09:00, which does not look pleasant to me. What I want is the x-axis max at 23:59 the same day, so it will show 09:00 - 23:59 as empty. I tried $graph["xAxis"]["max"] = (time()+86400)*1000 , but to no avail. any suggestion? thanks!

Answer 1

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

As soon as the data points pass through the hour range, it will automatically format the data labels in different ways. You can control the formatting of data labels via dateTimeLabelFormats .

Answer 2

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

The accepted answer may be true for older versions of tall charts, but in the current version (v3.0.7) you can also set the xAxis.max attribute to the datetime in which you want the chart to end. It will look like this, and this IMO is a cleaner solution path:

 $(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 3

As indicated in the previous answer, by default

Highcharts will only show the last specified data point.

However, as you can see on default jsfiddle for setting min max , you must specify both in addition to min and max, both endOnTick and startOnTick are false. Moreover, when dealing with missing datetime type data, you must set the sequence number to false to provide space for empty data.

This means your xAxis should look like this:

 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' },