120

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:

enter image description here

This is less than ideal... if it could show a date and time in this case, that'd be great. Anyone know how?

Jace Rhea
  • 4,982
  • 4
  • 36
  • 55
Jeff
  • 2,778
  • 6
  • 23
  • 27

3 Answers3

263

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

jstricker
  • 2,132
  • 1
  • 30
  • 44
eolsson
  • 12,567
  • 3
  • 41
  • 43
  • 16
    May be a stupid question but out of curiosity... where did you find the rest of these date codes? The reference only shows the default patterns you included. – buddyp450 Apr 08 '12 at 18:47
  • 20
    Found by reading the source, check the dateFormat method here: [Utilities.js](https://github.com/highslide-software/highcharts.com/blob/master/js/parts/Utilities.js#L253) – eolsson Apr 09 '12 at 11:04
  • 2
    Just to add to this, the default pattern for the current zoom level also includes the 'millisecond' key. – Cory May 24 '12 at 19:33
  • 2
    Huge thanks for this — the documentation refers to "dateFormat", but it's unclear whether they're expecting you to refer to the method in the source or somewhere else in the docs. Saved me a bunch of time :) – Jon Jul 07 '12 at 16:58
  • I set it up as in your example, but it still shows milliseconds when I give it data more often than once per second. Do you have any idea why? – Niels Brinch Aug 21 '13 at 18:03
  • I didn't understand why we were specifying all possible display formats. Thanks for clarifying that highscharts tries to determine the zoom level first. I think this should be clarified in the API documentation – IcedDante Aug 08 '14 at 18:22
  • Finally someone mentioned setting the xAxis type to 'datetime', it was hard to find any highcharts examples that specified that. – Jeremy May 01 '16 at 20:54
  • Thanks very much for the list of date codes. The list of codes is currently to be found in the function dateFormat() starting on line 616 of the [Utilities.js](https://github.com/highcharts/highcharts/blob/master/js/parts/Utilities.js#L616) (instead of line 253 4 years ago) – MilConDoin Jul 01 '16 at 07:55
  • If used in a [dateTimeLabelFormat](http://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats), don't forget milliseconds can be one of the options – tophernuts Sep 06 '16 at 22:31
  • And for mili second: `millisecond: '%H:%M:%S.%L',` – Nabi K.A.Z. Nov 17 '17 at 23:49
  • Is there really no single-digit (no leading zero) version of the month? Dates like April 3rd are formatted as (04/3). Also none of the links to the formatters work anymore, but I found the new place of the list in source: https://github.com/highcharts/highcharts/blob/88c0013b0d8a1447fe477af151e64002f59f0ecf/js/parts/Time.js#L444 – Scott Apr 09 '18 at 14:59
  • separately, please note that High Charts expects UNIX timestamps as integers and will not coerce them, even with `type: 'datetime'` defined, which can be significant if they happen to be strings. This happened with me where the JSON payload returned the keys (unix timestamps) as strings, so the format assumed was displayed using milliseconds format (millisecond-esque is more appropriate). – Michael Mar 17 '19 at 22:19
33

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

Bhesh Gurung
  • 50,430
  • 22
  • 93
  • 142
21

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

Ronniemittal
  • 369
  • 4
  • 7