Whatever message this page gives is out now! Go check it out!
Advanced chart customization in ColdFusion
Last update:
May 18, 2026
ColdFusion's charting capabilities allow developers to create dynamic and visually appealing charts. Advanced customizations such as themes, animation, rules, markers, and number formatting enable developers to enhance the visual appeal and functionality of their charts. This document provides an in-depth look at these customizations, including detailed explanations and examples.
Themes
Themes in ColdFusion charts allow developers to maintain a consistent look and feel across multiple charts by defining styling properties. Themes can customize elements such as colors, fonts, and other plot elements to align with an organization's design language and guidelines.
View. Create and apply themes in ColdFusion for more information.
Example
<cfscript>
legend={"vertical-align":"bottom","align"="center"};
</cfscript>
<cfchart type="line" showlegend=TRUE title="Daily temperature data" format="html" width="800" height="600"
legend="#legend#" theme="spectrum_light">
<cfchartseries serieslabel="London">
<cfchartdata item="Day 1" value="25"/>
<cfchartdata item="Day 2" value="26"/>
<cfchartdata item="Day 3" value="29.5"/>
<cfchartdata item="Day 4" value="24"/>
<cfchartdata item="Day 5" value="23"/>
</cfchartseries>
<cfchartseries serieslabel="Bangalore">
<cfchartdata item="Day 1" value="31"/>
<cfchartdata item="Day 2" value="29"/>
<cfchartdata item="Day 3" value="28"/>
<cfchartdata item="Day 4" value="33"/>
<cfchartdata item="Day 5" value="37"/>
</cfchartseries>
<cfchartseries serieslabel="Durban">
<cfchartdata item="Day 1" value="33"/>
<cfchartdata item="Day 2" value="36"/>
<cfchartdata item="Day 3" value="34"/>
<cfchartdata item="Day 4" value="39"/>
<cfchartdata item="Day 5" value="32"/>
</cfchartseries>
</cfchart>Animation
Animation in ColdFusion charts adds visual interest and can help highlight changes in data over time. ColdFusion supports various animation effects, speeds, and sequences.
- Effect: The type of animation effect (e.g., fade, slide).
- Speed: The duration of the animation.
- Delay: The delay before the animation starts.
- Sequence: The order in which elements are animated.
- Method: Defines the type of easing for the animation such as easeIn, easeOut, linear, etc.
View Add animations to charts in ColdFusion for more information.
Example
<cfchart format="html" chartheight="300" chartwidth="400" title="Monthly Sales" type="line" animation="true" effect="fade" speed="2">
<cfchartseries type="line" serieslabel="Sales">
<cfchartdata item="Jan" value="150" />
<cfchartdata item="Feb" value="200" />
<cfchartdata item="Mar" value="180" />
<cfchartdata item="Apr" value="250" />
<cfchartdata item="May" value="300" />
</cfchartseries>
</cfchart>In this example, the animation, effect, and speed attributes are used to add animation to the line chart
Rules
Rules in ColdFusion charts allow dynamic customization of chart appearances based on specific criteria. Rules can modify the appearance of chart elements based on logical conditions.
- Operators: Different types of operators (e.g., equality, range) can be used in rules.
- Syntax: Rules are defined using a string that specifies the condition, such as value ranges or equality.
View Apply rules to charts in ColdFusion for more information.
Example
<cfchart format="html" chartheight="300" chartwidth="400" title="Sales Data" type="bar">
<cfchartseries type="bar" serieslabel="Sales">
<cfchartdata item="Q1" value="150" />
<cfchartdata item="Q2" value="200" />
<cfchartdata item="Q3" value="180" />
<cfchartdata item="Q4" value="250" />
</cfchartseries>
<cfchartstyle rule="%v > 200" color="##FF0000" />
</cfchart>In this example, the cfchartstyle tag is used to apply a rule that changes the color of bars with values greater than 200.
Markers
Markers in ColdFusion charts highlight specific data points, making it easier to identify anomalies or outliers. Markers can be customized in terms of shape, size, color, and transparency.
- Shape: Circle, square, triangle, etc.
- Size: Adjust the size of the marker.
- Color: Change the color of the marker.
- Transparency: Adjust the transparency of the marker.
View Add markers to ColdFusion charts for more information.
Example
<cfchart format="html" chartheight="300" chartwidth="400" title="Sales Data" type="line">
<cfchartseries type="line" serieslabel="Sales">
<cfchartdata item="Jan" value="150" />
<cfchartdata item="Feb" value="200" />
<cfchartdata item="Mar" value="180" />
<cfchartdata item="Apr" value="250" />
<cfchartdata item="May" value="300" />
</cfchartseries>
<cfchartmarker shape="circle" size="10" color="##FF0000" transparency="0.5" />
</cfchart>In this example, the cfchartmarker tag is used to add markers to the line chart
Number Formatting
Number formatting in ColdFusion charts allows developers to control the display of numeric values, such as currency, percentages, and scientific notation. View Number formatting in ColdFusion charts for more information.
- Format options: Specify the format of the y-axis labels (e.g., number, currency, percent, date).
Example
<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>
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Share additional feedback to help us improve.
0/255
|
