Formatting dates on category axis

Martynas Majeris -

JavaScript Charts as well as JavaScript Stock Charts allows you to set custom formats of the dates it displays. I.e. on date-based category axis.

You can set date formats for each displayed period (hour, day, month, etc.) using a number of options: either directly on CategoryAxis object or through CategoryAxesSettings (Stock Chart only)

By default dateFormats are these:

{period:'DD',format:'MMM DD'},
{period:'WW',format:'MMM DD'},

For example, when the chart wants to display a date for a specific day, it looks up "DD" period and takes it's formatting setting, "MMM DD" in this case. "MMM" means a three letter month abreviation, "DD" - day number. I.e. "Jan 12".

So in order to change date formatting you just need to update the above array with whatever settings you need.

Below is a list of codes available to be used in date formats:

Pattern Description

Year. The number of Y letters represents digits in the resulting number. I.e.:

YY = 05

YYYY = 2005


Month of the year. The output depends on the number of M's:

M = 8 (1 or 2 digits)

MM = 08 (always two digits)

MMM = Aug (3-letter month abbreviation)

MMMM = August (full month name)


Week of the month


Day of the month:

D = 7 (one or two digits)

DD = 07 (always two digits)


Day of week:

E = 2 (single digit day of week)

EE = 02 (two-digit day of week)

EEE = Tue (3-letter abbreviation of the literal representation of the day of week)

EEEE = Tuesday (full day of week name)

A Produces either "am" or "pm".

Hour: 0-23

H Hour: 1-24
K Hour in am/pm: 0-11
L Hour in am/pm: 1-12

Minute in hour:

N = 8 (one or two digits)

NN = 08 (always two digits)

S Second in minute:

SS = 35



QQ = 51

QQQ = 051

 Other characters

Other characters will be displayed as they are without changing them. I.e.:

YYYY-MM-DD = 2013-03-01 

Have more questions? Submit a request


  • Avatar
    Tony Fenn

    Hi Martynas I was playing with the javascript line chart in jsfiddle with the example of 'minute' data going but I always want a format of DD-MMM JJ:NN on the category axis. The reason being that I need to look at a time series of minute data over several days. I seemed to get mixed results when I zoom out to a couple of days.  The balloon cursor certainly is useful in showing the day and month as well as he hour and minutes, but its not obvious at a glance that the data spans several days.  What do you recommend ?  Would you suggest reformatting the axis on the fly as one zooms in and out so that it shows months, then days then hours etc. ?

Powered by Zendesk