FusionCharts for Flex > Special Cases > Number Formatting > Basics

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.

Chart without any decimal formatting applied
With decimals set to 2 (see the first column value)
 

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' >.

Trailing zeroes missing in last column's value.
Forcing trailing zeroes by setting 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='.' >

Chart with default decimal and thousand separator. FusionCharts by default separates thousands using commas and decimals using dots.
Chart with swapped decimal and thousands separator character.
 
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.

  • numberPrefix: This attribute allows you to predefine a prefix for all numeric values of the chart. And is extremely useful if you are plotting currency values on a chart. So, if you want to use $ as prefix - you can do it, the following way.

    <chart numberPrefix='$'>

  • numberSuffix: This attribute allows you to predefine a suffix for all numeric values of the chart. So, if you are plotting height of mountains in meters you can suffix m or meters to all numeric values. Similarly, you can suffix p.a to numeric values if you are plotting interest rates.

    <chart numberSuffix='p.a'>

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:

Number Prefix set as $ for the chart
Number Suffix Set as %
 
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' >
<set label='John' value='125' />
<set label='Mary' value='134' />
<set label='Andy' value='131' />
</chart>

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.