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