Highchart and Highstock dateFormat function format example

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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 dateTimeLabelFormatsoption 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

Example toolkip format:

tooltip:{
                        useHTML: true,
                        formatter: function() {
                            var d = new Date(this.x);
                            var s = '';
                            s+='<b>Time:'+Highcharts.dateFormat('%Y-%B-%d %H:%M:%S.',  this.x)  +d.getMilliseconds()+'</b>';
                            $.each(this.points, function(i, point) {
                                s += '
<span style="color: '+point.series.color+';">'+point.series.name +'</span>'+': '+
                                    point.y;
                            });
                            return s;
                        },
                    shared: true
                }

http://www.highcharts.com/ref/#xAxis–dateTimeLabelFormats

One thought on “Highchart and Highstock dateFormat function format example

  1. This was a lifesaver literally. I’ve been searching for the correct way to do this, throughout the net, when finally i found this snippet. Thanks again for this. and keep up the good work. 🙂

    Maxx

Leave a Reply

Your email address will not be published. Required fields are marked *