Defines how values in Inputfields are formatted before being displayed in StockChart.
You can format numbers and date time values using this property. Below you will find descriptive table explaining various specifiers with example.
var stockChart = new CanvasJS.StockChart("container",
{
.
.
rangeSelector: {
inputFields: {
valueFormatString: "DD-MM-YYYY",
.
.
}
},
.
.
});
stockChart.render();
Below is a table with all the supported number formatting options.
| Format Specifier | Name | Description | Examples |
|---|---|---|---|
| “0” | Zero Placeholder | Replaces the zero with the corresponding digit if one is present; otherwise, zero appears in the result string. | 3182.4123 (“00000”) -> 03182 |
| “#” | Digit placeholder | Replaces the “#” symbol with the corresponding digit if one is present; otherwise, no digit appears in the result string. | 3182.4123 (“#####”) -> 3182 |
| “.” | Decimal Point | Determines the location of the decimal separator in the result string. | 0.3182(“0.00”) -> 0.32 |
| “,” | Group separator and number scaling |
Determined the location of the comma separator.
.Distance between the commas reading from left to right is taken as a scaling parameter. All the numbers after that will be grouped based on it. As a number scaling specifier, it divides a number by 1000 for each comma specified next to decimal separator – dot |
10000000 (“#,##,###”) -> 1,00,00,000 10000000 (“####,##”) -> 10,00,00,00 100000000 (“#,###,##”) -> 1,000,000,00 300000000(“#,,.”) -> 300 |
| “%” | Percentage placeholder | Multiplies a number by 100 | 3(“#%”) -> 300% |
| “‰” | Per mille placeholder | Multiplies a number by 1000. | 0.0123 (“#0.00‰”) -> 12.30 |
| “E0” “E+0” “E-0” “e0” “e+0” “e-0” |
Exponential notation | If followed by at least one 0 (zero), formats the result using exponential notation. The case of “E” or “e” indicates the case of the exponent symbol in the result string. The number of zeros following the “E” or “e” character determines the minimum number of digits in the exponent. A plus sign (+) indicates that a sign character always precedes the exponent. A minus sign (-) indicates that a sign character precedes only negative exponents. |
10000 (“0.0# e0”) -> 1.0 e4 1503.92311 (“0.0##e+00”) -> 1.504e+03 0.0000000232320(“##.000 E+0”) -> 23.232 E-9 |
| ‘string’ “string” |
Literal string delimiter | Indicates that the enclosed characters should be copied to the result string unchanged. | 68 (“# ‘%'”) -> 68 % |
| Others | All other characters | The character is copied to the result string unchanged. | 34 (“# USD”) -> 34 USD |
CanvasJS allows you to format Date and Time values according to your preference as JavaScript doesn’t have native support for the same. Below is a table that lists down custom date and time specifiers with their Description.
| 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” | 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 |
Below is an example showing how to format the Inputfield values.