cfchartseries

Last update:

May 18, 2026

Description

Used with the cfchart tag. This tag defines the chart style in which the data displays: bar, line, pie, and so on.

Syntax

<cfchartseries 

alpha = "Integer between 0 and 1" 

animate = "JSON string representation" 

aspect = "text" 

background = "JSON string representation" 

bevel = "JSON string representation" 

border = "JSON string representation" 

color = "text" 

data = "JSON string representation" 

dataFormat="Numbering format of the data series"

hovermarker = "JSON string representation" 

marker = "JSON string representation" 

type="type" 

itemColumn ="query column" 

label = "text" 

valueColumn="query column" 

colorlist = "list" 

dataLabelStyle="style" 

markerStyle="style" 

paintStyle="plain|raise|shade|light" 

query="query name" 

scales = "comma-seperated list of axes" 

shadow = "JSON string representation" 

seriesColor="hexadecimal value|web color" 

seriesLabel="label text"> 

toolTip = "JSON string representation" 

zColumn = "query column" 

type="type" 

itemColumn="query column" 

valueColumn="query column" 

colorlist = "list" 

dataLabelStyle="style" 

markerStyle="style" 

paintStyle="plain|raise|shade|light" 

query="query name" 

rules="rules for the charts"

seriesColor="hexadecimal value|web color" 

seriesLabel="label text"> 

</cfchartseries>

Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys.

History

ColdFusion (2025 release):

Added attributes rules and dataFormat.

ColdFusion 10: Added the following attributes: {{alpha, animate, aspect, background, bevel, border, marker, color, label, hoverMarker, data, scales, shadow, tooltip, zcolumn}}

ColdFusion MX 7:

Added the dataLabelStyle attribute.
Added the horizontalbar value of the type attribute. ColdFusion MX 6.1: Changed interpolation behavior: the tag now interpolates data points on line charts with multiple series.ColdFusion MX: Added this tag.

Attributes

Attribute	Req/Opt	Default	Description
alpha	Optional		Alpha (transparency) level of the background.Valid values range from 0 (transparent) to 1 (opaque).
animate	Opt		A struct of keys to define the animation such as effect and speed. An empty struct results in default animation with appear effect. For example, animation = { "effect" = 7, "delay" = 1, "method" = 1, "animate" = TRUE }
aspect	Opt		Defines the variations of a chart type, for example line, area, and dots in a radar chart.
background	Opt		A struct of keys related to background such as color: Sets the background color(s) color-1: Sets the first background color for the arrow color-2: Sets the second background color for the arrow (used with gradients) transparent: Set the transparency of a background image so that underlying colors or chart can show. fit: Defines the width/height to fit area of background. repeat: Defines type of image repeat. image: Defines the path to the background image. position: Defines the position of the background image.
bevel	Opt		A struct of keys related to bevel such as: color: Defines the color of the bevel. blur-x: Defines the sharpness/smoothness of the bevel edges in the x-direction. blur-y: Defines the sharpness/smoothness of the bevel edges in the y-direction. angle: Defines the angle of the bevel. distance: Distance in # \| #px indicating the distance from the object the bevel should be displayed.
border	Opt		A struct of keys related to border such as: color: Sets the color of the border. radius: Defines the radius of rounded corners. width: Defines the width of the border.
dataFormat	Opt		Apply different numbering formats to different data series. The dataFormat accepts scientific, short unit, or decimal attributes.
marker	Opt		A struct of keys used to style the marker such as size, border, background, and bevel.
color	Opt		Color of the main element (such as the bars) of a chart. For a pie chart, this is the color of the first slice.Hexadecimal value or supported named color; see the name list and information about six- and eight-digit hexadecimal values in the Usage section for the cfchart tag. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
label	Opt		Text of the data series label.
hoverMarker	Opt		A struct of keys used to style the marker on mouse hover such as size, border, background, and bevel.
data	Opt		The chart data. This is an array of arrays.Specify the data as follows: [ ["a",3],["b",5]] or [["a",4,5],["b",7,3]] for charts with z parameter such as bubble chart.
scales	Opt		Comma-separated list of axis against which to plot the series, for example, x,y2.
shadow	Opt	false	Used to enable/disable the shadow. The value can either be yes\|no or a struct that takes the key alpha.
tooltip	Opt		A struct of keys used to style the tool tip such as background, font, or border.
zcolumn	Opt		The value of the dimension. Applicable if the chart takes a third dimension in addition to x and y.
type	Required		Sets the chart display style: bar line pyramid area horizontalbar cone curve cylinder step scatter pie
itemColumn	Required if query attribute is specified		Name of a column in the query specified in the query attribute; contains the item label for a data point to graph.
valueColumn	Required if query attribute is specified		Name of a column in the query specified in the query attribute; contains data values to graph.
colorlist	Optional		Sets colors for each data point. Applies if the cfchartseries type attribute is pie, pyramid, area, horizontalbar, cone, cylinder, or step. Comma-delimited list of hexadecimal values or supported, named web colors; see the name list and information about six- and eight-digit hexadecimal values in the cfchart Usage section. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
dataLabelStyle	Optional	none	Specifies the way in which the color is applied to the item in the series: none: nothing is printed. value: the value of the datapoint. rowLabel: the row's label. columnLabel: the column's label. pattern: combination of column label, value, and aggregate information, such as the columnLabel value for the percentage of total graph, for example, Sales 55,000 20% of 277,000.
markerStyle	Optional	rectangle	Sets the icon that marks a data point for two-dimensional line, curve, and scatter graphs: rectangle triangle diamond circle letter mcross snow rcross
paintStyle	Optional	plain	Sets the paint display style of the data series: plain: solid color. raise: the appearance of a button. shade: gradient fill, darker at the edges. light: a lighter shade of color; gradient fill.
query	Optional		Name of the ColdFusion query from which to get data to graph.
rules	Optional		Rules to specify when creating the charts.
seriesColor	Optional		Color of the main element (such as the bars) of a chart. For a pie chart, the color of the first slice.Hexadecimal value or supported named color; see the name list and information about six- and eight-digit hexadecimal values in the Usage section for the cfchart tag. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
seriesLabel	Optional		Text of the data series label

Usage

The following attributes are not supported for Client side charting:paintStyle and the following values for markerstyle: letterx, mcross, snow, and rcross.A new attribute zvalue added to cfchartdata: Applicable if chart takes a third dimension in addition to x and y.

For a pie chart, ColdFusion sets pie slice colors as follows:

If the seriesColor attribute is omitted, ColdFusion automatically determines the colors of the slices.
If the seriesColor attribute is specified, ColdFusion automatically determines the colors of the slices after the first one, starting with the specified color for the first slice.

Limitations

The following server-side charting features are not available with client-side charting:

Linking charts to URL
Writing charts to a variable

Example 1

<!--- The following example analyzes the salary data in the cfdocexamples 

database and generates a bar chart showing average salary by department. ---> 

<!--- Get the raw data from the database. ---> 

<cfquery name="GetSalaries" datasource="cfdocexamples"> 

SELECT Departmt.Dept_Name, 

Employee.Dept_ID, 

Employee.Salary 

FROM Departmt, Employee 

WHERE Departmt.Dept_ID = Employee.Dept_ID 

</cfquery> 

<!--- Use a query of queries to generate a new query with ---> 

<!--- statistical data for each department. ---> 

<!--- AVG and SUM calculate statistics. ---> 

<!--- GROUP BY generates results for each department. ---> 

<cfquery dbtype = "query" name = "DataTable"> 

SELECT 

Dept_Name, 

AVG(Salary) AS avgSal, 

SUM(Salary) AS sumSal 

FROM GetSalaries 

GROUP BY Dept_Name 

</cfquery> 

<!--- Reformat the generated numbers to show only thousands. ---> 

<cfloop index = "i" from = "1" to = "#DataTable.RecordCount#"> 

<cfset DataTable.sumSal[i] = Round(DataTable.sumSal[i]/1000)*1000> 

<cfset DataTable.avgSal[i] = Round(DataTable.avgSal[i]/1000)*1000> 

</cfloop> 

<h1>Employee Salary Analysis</h1> 

<!--- Bar graph, from Query of Queries ---> 

<cfchart format="flash" 

xaxistitle="Department" 

yaxistitle="Salary Average"> 

<cfchartseries type="bar" 

query="DataTable" 

itemcolumn="Dept_Name" 

valuecolumn="avgSal" /> 

</cfchart>

Example 2

The following is a basic example of using client side charting.

<cfchart format ="html" type="pie"> 

<cfchartseries> 

<cfchartdata item="New car sales" value="50000"> 

<cfchartdata item="Used car sales" value="25000"> 

<cfchartdata item="Leasing" value="30000"> 

<cfchartdata item="Service" value="40000"> 

</cfchartseries> 

</cfchart>

Example 3

This example showcases how you can create a simple bubble chart by specifying zcolumn.

<cfchart format ="html" type="bubble" query="ChartQuery" showlegend="false"> 

<cfchartseries query="ProdQuery" type="bubble" itemcolumn="title" valuecolumn="total_days" zcolumn="rem_days" label="Total_Days"> 

</cfchart>

Example 4

This is an example that specifies labels as a struct.

<cfchart format ="html" type="bubble" que ry = " ChartQ ue ry " showlegend="false" labels=#[{"text"="Hello Label","hook":"node:plot=0,index=2,offset-x=-10,offset-y=-90"}]#> 

<cfchartseries type="bubble" label="Total_Days"> 

<cfchartdata item=1 value=10 zvalue=40> 

<cfchartdata item=2 value=20 zvalue=30> 

<cfchartdata item=3 value=30 zvalue=20> 

<cfchartdata item=4 value=20 zvalue=35> 

<cfchartdata item=5 value=40 zvalue=10> 

</cfchartseries> 

</cfchart>

Was this page helpful?

We're glad. Tell us how this page helped.

Found the answer to my problem Understood the instructions Liked the feature

Other suggestions

We're sorry. Can you tell us what didn't work for you?

Didn't find the answer to my problem Couldn't understand the instructions Didn't like the feature

Other suggestions

Thank you for your feedback. Your response will help improve this page.

Was this helpful?

We are sorry the content didn't meet your needs.

Share additional feedback to help us improve.

0/255 | Character limit exceeded.

Thank you so much for sharing your feedback!