User Guide Cancel

Format numbers in ColdFusion charts

 

ColdFusion offers a variety of data formatting options to help present your data in a more readable and visually appealing way.

Here are some common formatting options available in ColdFusion:

Scientific notation

For large or small numbers, you can display data in scientific notation, as follows: 

scaley = {
"exponent" : true,
"exponent-decimals" : 3
}
scaley = { "exponent" : true, "exponent-decimals" : 3 }
scaley = { 
    "exponent" : true, 
    "exponent-decimals" : 3 
} 

Short units

Short units in ColdFusion are abbreviations that simplify large numbers by shortening them into compact, readable formats, like using "K" for thousands, "M" for millions, or "B" for billions. This formatting style improves chart readability by minimizing the space large numbers take up, making them easier to interpret at a glance. Short units also support units written in lowercase.

scaley = {
"short" : true,
"short-unit" : "M"
}
scaley = { "short" : true, "short-unit" : "M" }
scaley = {     
    "short" : true, 
    "short-unit" : "M" 
} 

Decimal places

Decimal places in ColdFusion specifies the number of digits displayed after the decimal point for values on your chart. Controlling decimal places improves clarity, especially in cases where precision is important, or values have minor fractional differences.

plot = {
"decimals" : 2
}
plot = { "decimals" : 2 }
plot = { 
    "decimals" : 2 
} 

Create chart using scientific notation

Scientific notation allows you to represent very large or very small numbers in a concise form, where numbers are displayed as a product of a base and an exponent (e.g., 5E3 instead of 5000). Scientific notation is useful in science, engineering, and data analytics, where extremely large or small values are common.

ColdFusion allows you to display scientific notation on the X or Y axis and your chart labels, axis scales, and tooltips.

Set the exponent and exponent-decimals attributes within the scale and plot objects. 

Example 1

code

<cfscript>
scaley = {
"exponent" : true,
"exponent-decimals" : 3
}
</cfscript>
<cfchart format="html" type = "bar" markerSize="12" plot="#plot#"
yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
</cfchart>
<cfscript> scaley = { "exponent" : true, "exponent-decimals" : 3 } </cfscript> <cfchart format="html" type = "bar" markerSize="12" plot="#plot#" yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> </cfchart>
<cfscript>
    scaley = {
        "exponent" : true,
        "exponent-decimals" : 3
    }
</cfscript>
<cfchart format="html" type = "bar" markerSize="12"  plot="#plot#"
yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>
</cfchart>

The script sets the number of exponent decimals on the Y-axis. In this case, the Y-axis displays exponents up to three exponent places. 5000000 becomes 5.000E+6.

Output

Example 2

code

<cfscript>
plot={
"exponent" : true,
"exponent-decimals" : 1
}
scaley = {
"exponent" : true,
"exponent-decimals" : 3
}
</cfscript>
<cfchart format="html" type = "bar" markerSize="12" plot="#plot#"
yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
</cfchart>
<cfscript> plot={ "exponent" : true, "exponent-decimals" : 1 } scaley = { "exponent" : true, "exponent-decimals" : 3 } </cfscript> <cfchart format="html" type = "bar" markerSize="12" plot="#plot#" yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> </cfchart>
<cfscript>
    plot={
        "exponent" : true,
        "exponent-decimals" : 1
    }
    scaley = {
        "exponent" : true,
        "exponent-decimals" : 3
    }
</cfscript>
<cfchart format="html" type = "bar" markerSize="12"  plot="#plot#"
yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>
</cfchart>

The script sets the number of exponent decimals on the Y-axis. In this case, the Y-axis displays exponents up to three exponent places. 5000000 becomes 5.000E+6. Additionally, on hovering on each bar, a tooltip appears that displays the value up to three exponent places.

Output

Create chart using short units

Short units in ColdFusion are abbreviations that simplify large numbers by shortening them into compact, readable formats, like using "K" for thousands, "M" for millions, or "B" for billions. This formatting style improves chart readability by minimizing the space large numbers take up, making them easier to interpret at a glance.

Common short units in ColdFusion

ColdFusion supports the following abbreviations for large numbers:  

  • K for thousands (for example, 1,500 → 1.5K)

  • M for millions (for example, 2,000,000 → 2M)

  • B for billions (for example, 3,000,000,000 → 3B)

To apply short units to your chart, use the short and short-unit attributes on the axis where you want the values abbreviated.

Example 1

code

<cfscript>
scaley = {
"short" : true,
"short-unit" : "M"
}
</cfscript>
<cfchart format="html" type = "bar" markersize="12"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
</cfchart>
<cfscript> scaley = { "short" : true, "short-unit" : "M" } </cfscript> <cfchart format="html" type = "bar" markersize="12" yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> </cfchart>
<cfscript>
    scaley = {
        "short" : true,
        "short-unit" : "M"
    }
</cfscript>
<cfchart format="html" type = "bar" markersize="12"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>
</cfchart>

The script sets the number of exponent decimals on the Y-axis. In this case, the Y-axis displays short units as M. 5000000 becomes 5M.

Output

Example 2

code

<cfscript>
plot = {
"short" : true,
"short-unit" : "M"
}
scaley = {
"short" : true,
"short-unit" : "M"
}
</cfscript>
<cfchart format="html" type = "bar" markersize="12" plot="#plot#"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
</cfchart>
<cfscript> plot = { "short" : true, "short-unit" : "M" } scaley = { "short" : true, "short-unit" : "M" } </cfscript> <cfchart format="html" type = "bar" markersize="12" plot="#plot#" yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> </cfchart>
<cfscript>
    plot = {
        "short" : true,
        "short-unit" : "M"
    }
    scaley = {
        "short" : true,
        "short-unit" : "M"
    }
</cfscript>
<cfchart format="html" type = "bar" markersize="12" plot="#plot#"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>
</cfchart>

The script sets the short unit on the Y-axis. In this case, the Y-axis displays short units for millions, M. 5000000 becomes 5M. Additionally, on hovering on each bar, a tooltip appears that displays the value in M.

Output

Create chart using decimal places

Decimal places in ColdFusion specifies the number of digits displayed after the decimal point for values on your chart. Controlling decimal places improves clarity, especially in cases where precision is important, or values have minor fractional differences.

To apply the decimal values, add the decimals attribute to define the number of decimal places displayed in your chart labels, axis scales, and tooltips.

Example 1

code

<cfscript>
scaley = {
"short" : true,
"short-unit" : "M"
}
</cfscript>
<cfchart format="html" type = "bar" markersize="12"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
</cfchart>
<cfscript> scaley = { "short" : true, "short-unit" : "M" } </cfscript> <cfchart format="html" type = "bar" markersize="12" yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> </cfchart>
<cfscript>
    scaley = {
        "short" : true,
        "short-unit" : "M"
    }
</cfscript>
<cfchart format="html" type = "bar" markersize="12"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>
</cfchart>

The script sets up three decimal places on the Y-axis. In this case, the Y-axis displays the decimals of the values. 500.1000 becomes 500.000.

Output

Example 2

code

<cfscript>
plot = {
"short" : true,
"short-unit" : "M"
}
scaley = {
"short" : true,
"short-unit" : "M"
}
</cfscript>
<cfchart format="html" type = "bar" markersize="12" plot="#plot#"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
</cfchart>
<cfscript> plot = { "short" : true, "short-unit" : "M" } scaley = { "short" : true, "short-unit" : "M" } </cfscript> <cfchart format="html" type = "bar" markersize="12" plot="#plot#" yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> </cfchart>
<cfscript>
    plot = {
        "short" : true,
        "short-unit" : "M"
    }
    scaley = {
        "short" : true,
        "short-unit" : "M"
    }
</cfscript>
<cfchart format="html" type = "bar" markersize="12" plot="#plot#"
yaxis="#scaley#" title="Short units" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>
</cfchart>

The script sets up three decimal places on the Y-axis. In this case, the Y-axis displays the decimals of the values. 500.1000 becomes 500.000. Additionally, on hovering on each bar, a tooltip appears that displays the value up to two decimal places.

Output

New attribute of cfchartseries- dataFormat

In certain situations, when creating charts with multiple data series, it's important to use distinct number formats for each series to ensure the data is accurately represented and easily understood by viewers. This is particularly useful when the data series involve different units, such as currency, percentages, or scientific notation. For example, one series might display financial data as currency, while another shows growth rates as percentages. Customizing the number format for each series helps avoid misinterpretation, improves the chart's visual clarity, and makes complex data comparisons more accessible.

ColdFusion has introduced a new attribute dataFormat in cfchartseries to help apply different numbering formats to different data series. The dataFormat accepts scientific, short unit, or decimal attributes.

For example,

code

<cfscript>
format1={
"exponent" : true,
"exponent-decimals" : 2
}
format2={
"exponent" : true,
"exponent-decimals" : 3
}
scaley = {
"exponent" : true,
"exponent-decimals" : 3
}
</cfscript>
<cfchart format="html" type = "bar" markerSize="12"
yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE">
<cfchartseries seriescolor="##5aca91" dataFormat="#format1#">
<cfchartdata item="India" value="5000000">
<cfchartdata item="France" value="2000000">
<cfchartdata item="Australia" value="3000000">
<cfchartdata item="Brazil" value="7000000">
</cfchartseries>
<cfchartseries seriescolor="##5a90ca" dataFormat="#format2#">
<cfchartdata item="India" value="10000000">
<cfchartdata item="France" value="22000000">
<cfchartdata item="Australia" value="29000000">
<cfchartdata item="Brazil" value="17000000">
</cfchartseries>
</cfchart>
<cfscript> format1={ "exponent" : true, "exponent-decimals" : 2 } format2={ "exponent" : true, "exponent-decimals" : 3 } scaley = { "exponent" : true, "exponent-decimals" : 3 } </cfscript> <cfchart format="html" type = "bar" markerSize="12" yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE"> <cfchartseries seriescolor="##5aca91" dataFormat="#format1#"> <cfchartdata item="India" value="5000000"> <cfchartdata item="France" value="2000000"> <cfchartdata item="Australia" value="3000000"> <cfchartdata item="Brazil" value="7000000"> </cfchartseries> <cfchartseries seriescolor="##5a90ca" dataFormat="#format2#"> <cfchartdata item="India" value="10000000"> <cfchartdata item="France" value="22000000"> <cfchartdata item="Australia" value="29000000"> <cfchartdata item="Brazil" value="17000000"> </cfchartseries> </cfchart>
<cfscript>
    format1={
        "exponent" : true,
        "exponent-decimals" : 2
    }

    format2={
        "exponent" : true,
        "exponent-decimals" : 3
    }

    scaley = {
        "exponent" : true,
        "exponent-decimals" : 3
    }
</cfscript>
<cfchart format="html" type = "bar" markerSize="12" 
yaxis="#scaley#" title="Scientific notation" height="400" width="800" showLegend="FALSE">
        <cfchartseries  seriescolor="##5aca91" dataFormat="#format1#">
            <cfchartdata item="India" value="5000000">
            <cfchartdata item="France" value="2000000">
            <cfchartdata item="Australia" value="3000000">
            <cfchartdata item="Brazil" value="7000000">
        </cfchartseries>

        <cfchartseries  seriescolor="##5a90ca" dataFormat="#format2#">
            <cfchartdata item="India" value="10000000">
            <cfchartdata item="France" value="22000000">
            <cfchartdata item="Australia" value="29000000">
            <cfchartdata item="Brazil" value="17000000">
        </cfchartseries>
</cfchart>

The example allows you to specify two distinct scientific number formatting for the two data series. The first series displays two exponents. 

The second series displays three exponents.

Similarly, you can extend the number formatting to short units and number of decimal places for multiple data series.

Get help faster and easier

New user?