Formatting dates

Our 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 and some other places of the charts.

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 Section titled “Pattern”	Description Section titled “Description”
Y	Year. The number of Y letters represents digits in the resulting number. I.e.: YY = 05 (always two digits) * YYYY = 2005
M	Month of the year. The output depends on the number of M’s: M = 8 (one or two digits) * MM = 08 (always two digits) MMM = Aug (3-letter month abbreviation) * MMMM = August (full month name) *
W	Week of the year *
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 J = 3 (one or two digits) * JJ = 03 (always two digits)
H	Hour: 1-24 H = 3 (one or two digits) * HH = 03 (always two digits)
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: S = 5 (one or two digits) * SS = 05 (always two digits)
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

* the formatting codes marked with an asterisk are not supported in dataDateFormat setting. The chart will not be able to parse those from your string-based dates in data.

There are some other properties of the charts which can use the same date formatting technique. These are:

categoryBalloonDateFormat of ChartCursor.
categoryBalloonDateFormats of ChartCursorSettings.
balloonDateFormat of AmSerialChart.
dateFormat of PeriodSelector. Note- you can’t use non-numeric formats (MMM, MMMM) for this property.
dataDateFormat of AmSerialChart - this one should be set in case your dates in dataProvider are strings, not Date Objects.

* supports only zero leading numbers; year needs to contain all four digits

Using amCharts methods to format or parse dates

In case you are using amCharts, and need to format date object to a nice date string, you can use our method for that, for example:

AmCharts.formatDate(new Date(2014,1,3), "DD MMM, YYYY");

will return 03 Feb, 2014 string. (February, as months in JavaScript are zero-based).

If you have a date string and want to get date object from it, you call:

AmCharts.stringToDate("01-10-2014", "DD-MM-YYYY")

We hope these methods will help you to save some time.

Formatting dates

Pattern

Description

Using amCharts methods to format or parse dates