FusionCharts v3 offers numerous options, which help in predefining the formatting of the numbers that are displayed on the chart. Using these options you can preset many things, such as the suffix and prefix of the numbers, number of decimal places, etc. Additionally, you get to customize the chart scale with great deal of accuracy. This section begins by describing number formatting and then goes on to describe the process of customizing the chart scale. We'll start with setting decimal precisions for the numbers displayed on the chart. |
||||
Controlling decimal precision | ||||
All FusionCharts v3 charts support the attribute decimals. This single attribute lets you control the decimal precision of all the numbers on the chart. Using this attribute, you can globally set the number of decimal places for all numeric values of the chart. For e.g., if you have numbers 12.432, 13.4, and 13 and you set <chart ... decimals='2' >, the numbers would be converted to 12.43, 13.4, and 13 respectively. |
||||
|
||||
Similarly, if you have numbers 0.12342, 0.134, and 0.13, and you set decimals to 3, FusionCharts would convert them to 0.124, 0.134, and 0.13 respectively. Notice that, even though decimals is set to 3, no forced zeroes are added to numbers that have lesser than 3 decimal places. FusionCharts does not forcibly add 0 padding to 0.13 to make it 0.130. To add trailing zeroes, you need to enable forceDecimal by setting its value to 1 <chart ... forceDecimals='1' >. |
||||
|
||||
Automatic number formatting | ||||
FusionCharts automatically associates scale unit to numbers by suffixing K (thousand) or M (million) based on the value of the numbers. | ||||
![]() |
||||
In the chart (above), numbers 12500, 13400, and 13300 have been formatted to be displayed as 12.5K, 13.4K, and 13.3K respectively. This automatic scaling of numbers can be prevented by setting formatNumberScale attribute to 0 (see chart below). <chart formatNumberScale='0'..> |
||||
![]() |
||||
As you can see, numbers are no longer prefixed with scale units - instead comma (,) is used as a thousand separator and is automatically inserted at appropriate places. To remove all forms of formatting - even comma (,) based formatting, you need to set formatNumber attribute to 0. Note - Setting formatNumber attribute to zero will result in non adherence to decimals attribute even if it has been explicitly defined. t ... formatNumber='0' formatNumberScale='0' ..> : |
||||
![]() |
||||
Setting custom thousand and decimal separator character | ||||
By default, FusionCharts uses dot (.) as decimal separator and comma (,) as thousand separator. However, you can customize these separating character based on your requirements. Change of separation characters is done using decimalSeparator and thousandSeparator attributes. So, if you want to use dot (.) as thousand separator and comma (,) as decimal separator then you need to configure the XML in following manner: <chart ... decimalSeparator=',' thousandSeparator='.' > |
||||
|
||||
Adding number prefix and suffix | ||||
FusionCharts allows you to add a prefix or suffix to all numbers on the chart. This feature can be implemented with the help of following attributes.
If you intend to use special characters for numberPrefix or numberSuffix, you need to URL encode them while using dataXML method. For example, if you wish to have numberSuffix as % (like 30%), you need to specify it as numberSuffix='%25'. However, if you are using dataURL method you do not have to URL encode special characters. Examples: |
||||
|
||||
Y-axis values decimal formatting in manual div-lines mode | ||||
If you've opted to set the number of divisional lines on chart manually, you can also control the decimals of Y-axis values. Consider the following example: <chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' > |
||||
![]() |
||||
In this chart, we've manually fixed the chart's lower limit and upper limit. Additionally, we have specified the number of divisional lines to be displayed and we've also informed FusionCharts not to automatically adjust divisional lines. Now, if you see the chart, you'll find that FusionCharts has truncated decimals of Y-axis values, as it couldn't find any other decimal values on the chart. To preset the decimal places of Y-axis values you need to use the yAxisValueDecimals attribute. <chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' yAxisValueDecimals='2' decimals='0'>
|
||||
![]() |
||||
Note that forceDecimals doesn't work in this mode. Next, we'll see how to utilize the new number scale formatting properties of FusionCharts v3. |