Often it is required that input values are displayed in a formatted way, like adding comma separation in long numeric values. JavaScript doesn’t come with extensive formatting options like most other higher level languages. Hence CanvasJS allows you to format numbers using valueFormatString (axisX & axisY), xValueFormatString (dataSeries) & yValueFormatString (dataSeries).
For a given number 1234567.58 below are some of the format strings and how the result looks.
| Value Format String | Result – Formatted Number |
|---|---|
| #,###.## | 1,234,567.58 |
| #,###.### | 1,234,567.58 |
| #,###.##0 | 1,234,567.580 |
| #,###.# | 1,234,567.6 |
| #,##,###.# | 12,34,567.6 |
| #,###,.## | 1,234.57 |
| #,###,.##K | 1,234.57K |
| #,###,,.##M | 1.23M |
| #,##0,,,.#####G | 0.00123G |
| #.00E+0 | 1.23E+6 |
| ##.00E+0 | 12.35E+5 |
| ##.000E+00 | 12.346E+05 |
| 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 |
In the below example, try various combination of valueFormatString from the table.
If you need more flexibility while formatting numbers, you can write your own labelFormatter callback function for axisX & axisY. In this case utility function like formatNumber and formatDate can come handy.
Tip
Comments 5
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Is there a way to change how numbers are displayed? In my country we use 1.000,00 instead of 1,000.00 for displaying number and currencies.
Yes! Just yesterday I released v1.2 which supports chart localization… :)
That is super to hear! Thanks for the link and keep up the good work!
Sir, Is there anyway i can use the table data..
Are you looking for this example.