CanvasJS allows you to format Date and Time values according to your preference as JavaScript doesn’t have native support for the same.
For a given date Date(2016, 07, 15, 10, 30) that is 15 August 2016 10:30 AM below are some of the format strings and how the result looks.
Value Format String | Result – Formatted Date |
---|---|
hh:mm TT | 10:30 AM |
DD MMM | 15 Aug |
DD-MM-YY | 15-08-16 |
DDD HH:mm:ss | Mon 10:30:00 |
DD MMMM YYYY | 15 August 2016 |
DDDD MMM YYYY HH:mm:ss k | Monday Aug 2015 10:30:00 GMT+0530 |
D’th’ MMMM hh:mm tt | 15th August 10:30 am |
‘Morning’ hh ‘hour’ mm ‘minute’ | Morning 10 hour 30 minute |
Format Specifier | Description | Examples |
---|---|---|
“D” | The day of the month, from 1 through 31. | Sun Feb 03 2013 22:04:49 -> 3 Sun Feb 15 2013 22:04:49 -> 15 |
“DD” | The day of the month, from 01 through 31. | Sun Feb 03 2013 22:04:49 -> 03 Sun Feb 15 2013 22:04:49 -> 15 |
“DDD” | The abbreviated name of the day of the week. | Sun Feb 03 2013 22:04:49 -> Sun |
“DDDD” | The full name of the day of the week. | Sun Feb 03 2013 22:04:49 -> Sunday |
“M” | The month, from 1 through 12. | Sun Feb 03 2013 22:04:49 -> 2 |
“MM” | The month, from 01 through 12. | Sun Feb 03 2013 22:04:49 -> 02 |
“MMM” | The abbreviated name of the month. | Sun Feb 03 2013 22:04:49 -> Feb |
“MMMM” | The full name of the month. | Sun Feb 03 2013 22:04:49 -> February |
“Y” | The year, from 0 to 99. | Sun Feb 03 2003 22:04:49 -> 3 Sun Feb 03 2013 22:04:49 -> 13 |
“YY” | The year, from 00 to 99. | Sun Feb 03 2003 22:04:49 -> 03 Sun Feb 03 2013 22:04:49 -> 13 |
“YYY” | The year, with a minimum of three digits. | Sun Feb 03 1999 22:04:49 -> 999 Sun Feb 03 2003 22:04:49 -> 003 Sun Feb 03 2013 22:04:49 -> 013 |
“YYYY” | The year as a four-digit number. | Sun Feb 03 2003 22:04:49 -> 2003 Sun Feb 03 2013 22:04:49 -> 2013 |
“h” | The hour, using a 12-hour clock from 1 to 12. | Sun Feb 03 2013 22:04:49 -> 10 Sun Feb 03 2013 02:04:49 -> 2 |
“hh” | The hour, using a 12-hour clock from 01 to 12. | Sun Feb 03 2013 22:04:49 -> 10 Sun Feb 03 2013 02:04:49 -> 02 |
“H” | The hour, using a 24-hour clock from 0 to 23. | Sun Feb 03 2013 22:04:49 -> 22 Sun Feb 03 2013 02:04:49 -> 2 |
“HH” | The hour, using a 24-hour clock from 00 to 23. | Sun Feb 03 2013 22:04:49 -> 22 Sun Feb 03 2013 02:04:49 -> 02 |
“m” | The minute, from 0 through 59. | Sun Feb 03 2013 22:04:49 -> 4 Sun Feb 03 2013 02:34:49 -> 34 |
“mm” | The minute, from 00 through 59. | Sun Feb 03 2013 22:04:49 -> 04 Sun Feb 03 2013 02:34:49 -> 34 |
“s” | The second, from 0 through 59. | Sun Feb 03 2013 22:04:09 -> 9 Sun Feb 03 2013 02:34:49 -> 49 |
“ss” | The second, from 00 through 59. | Sun Feb 03 2013 22:04:09 -> 09 Sun Feb 03 2013 02:34:49 -> 49 |
“f” | The value of hundredth millisecond. | Sun Feb 03 2013 02:34:49.237 -> 2 |
“ff” | The value of hundredth and tenth millisecond. | Sun Feb 03 2013 02:34:49.237 -> 23 |
“fff” | The value of milliseconds in three digits. | Sun Feb 03 2013 02:34:49.237 -> 237 |
“t” | The first character of the am/pm designator. (lower case) | Sun Feb 03 2013 22:04:09 -> p Sun Feb 03 2013 02:34:49 -> a |
“tt” | The am/pm designator. (lower case) | Sun Feb 03 2013 22:04:09 -> pm Sun Feb 03 2013 02:34:49 -> am |
“T” | The first character of the AM/PM designator. (upper case) | Sun Feb 03 2013 22:04:09 -> P Sun Feb 03 2013 02:34:49 -> A |
“TT” | The AM/PM designator. (upper case) | Sun Feb 03 2013 22:04:09 -> PM Sun Feb 03 2013 02:34:49 -> AM |
“K” | Time zone information. | Sun Feb 03 2013 22:04:49 GMT+0530 -> GMT +0530 |
“z” | Hours offset from UTC, with no leading zeros. | Sun Feb 03 2013 22:04:49 GMT+0530 -> +5 |
“zz” | Hours offset from UTC, with a leading zero for a single-digit value. | Sun Feb 03 2013 22:04:49 GMT+0530 -> +05 |
“zzz” | Hours and minutes offset from UTC. | Sun Feb 03 2013 22:04:49 GMT+0530 -> +0530 |
“string” ‘string’ |
Literal string delimiter. | Sun Feb 03 2003 22:04:49 (‘Morning’ D) -> Morning 3 |
Any other character | The character is copied to the result string unchanged. | Sun Feb 03 2003 22:04:49 (“val h:mm”) -> val 10:04 |
In The next example we are providing input to x as Date Object, try various specifers in valueFormatString inside axisX.
If you need more flexibility while formatting dates, you can write your own labelFormatter callback function for axisX. In this case utility function like formatNumber and formatDate can come handy.
13 Comments
Hi there,
I found there is a bug in your javascript. A date value for the axisX datapoint. The month part is being shifted by one. For example (x:new Date(2012, 06, 15) is displayed in the graph as “15-Jul”. It should be “15-Jun”.
Are you able to fix this bug. We purchased your Canvasjs component and would like this to be fixed.
Thanks,
Carlos
Lee Valley Tools.
Carlos,
Its actually not a bug. Month values being passed to the Date constructor follow zero based index in JavaScript – month values range from 0-11 (instead of 1-12)
Please see the last reply in this thread for more info. https://canvasjs.com/forums/topic/minutedata-gives-monthissue/#post-4630
Could it be possible to specify a callback function for date formatting?
In the past I have used the php plotting library “phplot” and its possibility to pass such a function. That makes it possible to have different date formats inside the same chart, e.g.:
Normally only show the time; at date changes, show the date, too.
As far as I understand these docs, you can’t achieve this behavior with CanvasJS by now, right?
Update:Custom Formatting is available in v1.7.0. Please checkout label formatter.
Hi
Is it possible to translate the weekdays into other languages?
Yes. Please refer to culture and localization section
Nice!
is it possibe to shpw the time in x-axis instead of date?
I cannot get the hours and minutes date formatting working. I’m trying to get the following date
x: new Date(2016, 03, 03, 9, 10, 0, 0)
I.e. Sun Apr 03 2016 09:10:00.0
shown as only the time part i.e. “09:10”. I’m using the below for this:
chart.options.axisX = { valueFormatString: “HH-mm”};
but get only “00-00” as a result shown. What is wrong here?
Mikko,
We were unable to reproduce your issue. As we checked, its working fine. Can you kindly create a jsfiddle, so that we can help you out.
I got the problem solved. HH-mm now working ok. The only thing that I changed was the x-coordinate name in my dataPoint object. See below. For some reason, after this the axisX-formatting started to work ok.
ORIGINAL:
function dataPoint(label, y)
{
this.label = label;
this.y = y;
}
CHANGED TO:
function dataPoint(x, y)
{
this.x = x;
this.y = y;
}
Hello,
I can’t apply the valueFormatString in the toolTip. Is there a way to do that?
Thank you
You can specify xValueFormatString or/and yValueFormatString in dataSeries to apply valueFormatString in the toolTip.