Overview – Formatting Numbers in Chart

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

Below is a table with all the supported 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

In the below example, try various combination of valueFormatString from the table.

Try Editing The Code


Custom Label Formatting

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.

Try Editing The Code
 Tip   
  • You can hide numeric / dateTime labels on axis by setting valueFormatString to ” ” (space).
  • You can further customize number formatting style according to your locale/country using Culture parameter.
  • Also Checkout xValueFormatString and yValueFormatString
  • Also Checkout formatNumber static Method
If you have any questions, please feel free to ask in our forums.Ask Question

5 Comments

If you have any questions, please feel free to ask in our forums. Ask Question