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.