How to get highcharts dates in the x axis?
Is there a standard way to get dates on the x-axis for Highcharts? Can't find it in their documentation: https://api.highcharts.com/highcharts/xAxis.type
When my time range is large enough, it shows dates. However, when the time range isn't large enough, it just shows hours, like this:
This is less than ideal... if it could show a date and time in this case, that'd be great. Anyone know how?
Highcharts will automatically try to find the best format for the current zoom-range. This is done if the xAxis has the type 'datetime'
. Next the unit of the current zoom is calculated, it could be one of:
- second
- minute
- hour
- day
- week
- month
- year
This unit is then used find a format for the axis labels. The default patterns are:
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
If you want the day to be part of the "hour"-level labels you should change the dateTimeLabelFormats
option for that level include %d
or %e
.
These are the available patters:
- %a: Short weekday, like 'Mon'.
- %A: Long weekday, like 'Monday'.
- %d: Two digit day of the month, 01 to 31.
- %e: Day of the month, 1 through 31.
- %b: Short month, like 'Jan'.
- %B: Long month, like 'January'.
- %m: Two digit month number, 01 through 12.
- %y: Two digits year, like 09 for 2009.
- %Y: Four digits year, like 2009.
- %H: Two digits hours in 24h format, 00 through 23.
- %I: Two digits hours in 12h format, 00 through 11.
- %l (Lower case L): Hours in 12h format, 1 through 11.
- %M: Two digits minutes, 00 through 59.
- %p: Upper case AM or PM.
- %P: Lower case AM or PM.
- %S: Two digits seconds, 00 through 59
http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats
Check this sample out from the Highcharts API.
Replace this
return Highcharts.dateFormat('%a %d %b', this.value);
With this
return Highcharts.dateFormat('%a %d %b %H:%M:%S', this.value);
Look here about the dateFormat()
function.
Also see - tickInterval and pointInterval
You write like this-:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d %b %Y' //ex- 01 Jan 2016
}
}
also check for other datetime format
http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats