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:'fff',format:'JJ:NN:SS'},
{period:'ss',format:'JJ:NN:SS'},
{period:'mm',format:'JJ:NN'},
{period:'hh',format:'JJ:NN'},
{period:'DD',format:'MMM DD'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MMM'},
{period:'YYYY',format:'YYYY'}]
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 |
| Y |
Year. The number of Y letters represents digits in the resulting number. I.e.: YY = 05 YYYY = 2005 |
| M |
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) |
| W |
Week of the month |
| D |
Day of the month: D = 7 (one or two digits) DD = 07 (always two digits) |
| E |
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". |
| J |
Hour: 0-23 |
| H | Hour: 1-24 |
| K | Hour in am/pm: 0-11 |
| L | Hour in am/pm: 1-12 |
| N |
Minute in hour: N = 8 (one or two digits) NN = 08 (always two digits) |
| S | Second in minute: SS = 35 |
| Q |
Milliseconds: 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 |
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. ?