cfchart generates a chart or graph directly in CFML, without reaching for an external JavaScript charting library. The actual data comes from one or more nested cfchartseries tags, each holding cfchartdata points or pulling from a query.
Learning Objectives
After completing this lesson, you'll be able to:
- Build a basic chart from static data points.
- Generate a chart directly from a query.
- Add clickable drill-down with the url attribute.
- Recognize real gaps in Lucee's cfchart implementation.
How the Pieces Fit Together
Query or Static cfchartdata Points
cfchartseries (type + data)
cfchart (dimensions + styling)
Rendered Chart
A Basic Pie Chart
<cfchart format="html" chartheight="300" chartwidth="400" title="Car Sales">
<cfchartseries type="pie">
<cfchartdata item="New Cars" value="50000">
<cfchartdata item="Used Cars" value="25000">
</cfchartseries>
</cfchart>cfchart's Core Attributes
| Attribute | Meaning |
|---|---|
| format | html (default), jpg, png; flash was removed in the ColdFusion 2025 release |
| chartwidth / chartheight | Defaults to 320×240 pixels |
| title | The chart's title |
| show3d / showlegend / showborder | Display toggles |
| xaxistitle / yaxistitle | Axis labels |
| scalefrom / scaleto | Explicit Y-axis range |
| labelformat | number (default), currency, percent, or date |
| style | beige, blue, default, red, silver, or yellow |
| gridlines / showxgridlines / showygridlines | Grid display |
| url | Makes data points clickable; supports $VALUE$, $ITEMLABEL$, $SERIESLABEL$ placeholders |
| name | A variable to hold the chart's binary data instead of rendering it directly |
cfchartseries's Attributes
| Attribute | Meaning |
|---|---|
| type | bar, line, pyramid, area, horizontalbar, cone, curve, cylinder, step, scatter, or pie (required) |
| query | A query to pull data from, instead of nested cfchartdata tags |
| itemcolumn / valuecolumn | Which query columns hold item labels and values |
| serieslabel / seriescolor | This series' label and color |
| paintstyle | plain, raise, shade, or light |
| colorlist | Comma-delimited colors, for a pie chart's individual slices |
| datalabelstyle | none, value, rowlabel, columnlabel, or pattern |
query-driven data is configured on cfchartseries, not on the outer cfchart tag itself.
A Real Example: A Chart Driven Directly by a Query
<cfchart format="html" title="Monthly Revenue" chartwidth="500">
<cfchartseries
type="bar"
query="monthlyRevenue"
itemcolumn="monthName"
valuecolumn="totalRevenue"
serieslabel="Revenue">
</cfchartseries>
</cfchart>Y: totalRevenue · X: monthName
Illustrative sample data, exactly what monthlyRevenue's rows would supply once itemcolumn and valuecolumn are pointed at the right columns.
A Real Example: Clickable Drill-Down
<cfchart format="html" title="Sales by Region" url="/reports/region-detail.cfm?region=$ITEMLABEL$&amount=$VALUE$">
<cfchartseries type="bar" query="salesByRegion" itemcolumn="region" valuecolumn="totalSales">
</cfchartseries>
</cfchart>Y: totalSales · X: region
$ITEMLABEL$, $VALUE$, and $SERIESLABEL$ are substituted per data point, letting a click on one bar or slice navigate to a detail page for exactly that item. Each bar above would link to that region's own detail page.
A Real Gotcha: format="flash" Is Gone
format="flash" was removed entirely in the ColdFusion 2025 release. Code still targeting it needs to move to html, jpg, or png.
Real Gaps in Lucee's cfchart
| Aspect | Adobe cfchart | Lucee chart |
|---|---|---|
| Output formats | html (default), jpg, png (flash removed in CF2025) | gif, jpg, or png only, no html output format |
| Packaging | Built in | Requires the Chart Extension for Jakarta EE (Lucee 7+) |
| Unimplemented attributes | — | gridlines, seriesPlacement, style, tipbgcolor, tipStyle, xAxisType, and yAxisType have no effect on Lucee |
The missing html output format is the more consequential gap, an Adobe chart relying on html's interactivity doesn't have a direct equivalent rendering mode on Lucee.
A Real Operational Detail: Charting Settings in the Administrator
Adobe's ColdFusion Administrator has a Server Settings > Charting page controlling server-side chart caching and concurrent chart-request limits, worth tuning for a chart-heavy application under real load.
Common Beginner Mistakes
Using format="flash" on ColdFusion 2025+
It was removed entirely in that release, existing code needs to move to html, jpg, or png.
Setting query on cfchart instead of cfchartseries
Query-driven data is configured on cfchartseries (query, itemcolumn, valuecolumn), not on the outer cfchart tag.
Assuming gridlines, style, or tipStyle work identically on Lucee
Lucee's documentation lists them as unimplemented, along with seriesPlacement, tipbgcolor, xAxisType, and yAxisType, they have no effect there.
Relying on html format output on Lucee
Lucee's cfchart only supports gif, jpg, or png, there's no html rendering mode to fall back to.
Best Practices
- Use html format for modern, interactive charts on Adobe ColdFusion; reach for jpg/png when a static image (a report, an email) is actually needed.
- Use url with $VALUE$/$ITEMLABEL$/$SERIESLABEL$ for drill-down dashboards instead of building separate click handling.
- Verify Lucee's unimplemented attribute list before relying on gridlines, style, or the tooltip attributes cross-engine.
- Tune the Administrator's charting cache and concurrency settings for a chart-heavy page under real production load.
Interview Questions
Where is query-driven chart data actually configured, cfchart or cfchartseries?
cfchartseries, via its query, itemcolumn, and valuecolumn attributes, not the outer cfchart tag.
What happened to format="flash"?
It was removed entirely in the ColdFusion 2025 release, existing code needs to migrate to html, jpg, or png.
What's the most consequential gap in Lucee's cfchart compared to Adobe's?
Lucee only supports gif, jpg, or png output, there's no html rendering format, unlike Adobe where html is actually the default.
How would you make a chart's data points clickable, linking to a detail page for the specific item clicked?
Set cfchart's url attribute with $ITEMLABEL$, $VALUE$, and/or $SERIESLABEL$ placeholders, substituted per data point when rendered.
Summary
In this lesson, you built a chart from static data and directly from a query, added clickable drill-down with url, covered the removal of format="flash" in ColdFusion 2025, and real gaps in Lucee's cfchart, missing html output and several unimplemented styling attributes.
What's Next?
The next lesson covers cfimage, resizing, cropping, and manipulating images directly in CFML.