Get started with cfchart

Last updated on Feb 25, 2025

ColdFusion

Open app

CFML Reference User Guide

ColdFusion functions

ColdFusion functions by category
Functions a-b
1. Abs
2. ACos
3. AddSOAPRequestHeader
4. AddSOAPResponseHeader
5. AjaxLink
6. AjaxOnLoad
7. ApplicationStop
8. ArrayAppend
9. ArrayAvg
10. ArrayClear
11. ArrayContains
12. ArrayContainsNoCase
13. ArrayDelete
14. ArrayDeleteAt
15. ArrayDeleteNoCase
16. ArrayEach
17. ArrayFilter
18. ArrayFind
19. ArrayFindAll
20. ArrayFindAllNoCase
21. ArrayFindNoCase
22. ArrayInsertAt
23. ArrayIsDefined
24. ArrayIsEmpty
25. ArrayLen
26. ArrayMap
27. ArrayMax
28. ArrayMin
29. ArrayNew
30. ArrayPrepend
31. ArrayReduce
32. ArrayResize
33. ArraySet
34. ArraySetMetadata
35. ArraySlice
36. ArraySort
37. ArraySum
38. ArraySwap
39. ArrayToList
40. Asc
41. ASin
42. Atn
43. AuthenticatedContext
44. AuthenticatedUser
45. BinaryDecode
46. BinaryEncode
47. BitAnd
48. BitMaskClear
49. BitMaskRead
50. BitMaskSet
51. BitNot
52. BitOr
53. BitSHLN
54. BitSHRN
55. BitXor
56. BooleanFormat
Functions-c-d
Functions-e-g
Functions-h-im
Functions-in-k
Functions-l
Functions-m-r
Functions-s
Functions-t-z
1. Tan
2. ThreadJoin
3. ThreadTerminate
4. Throw
5. TimeFormat
6. ToBase64
7. ToBinary
8. ToScript
9. ToString
10. Trace
11. Transactionandconcurrency
12. TransactionCommit
13. TransactionRollback
14. TransactionSetSavePoint
15. Trim
16. UCase
17. URLDecode
18. URLEncodedFormat
19. URLSessionFormat
20. Val
21. ValueList
22. VerifyClient
23. Week
24. Wrap
25. WriteDump
26. WriteLog
27. WriteOutput
28. WSGetAllChannels
29. WSGetSubscribers
30. WSPublish
31. WSSendMessage
32. XmlChildPos
33. XmlElemNew
34. XmlFormat
35. XmlGetNodeType
36. XmlNew
37. XmlParse
38. XmlSearch
39. XmlTransform
40. XmlValidate
41. Year
42. YesNoFormat

ColdFusion tags

ColdFusion tag summary
ColdFusion tags by category
1. Application framework tags
  1. cfapplication
  2. cfassociate
  3. cferror
  4. cfimport
  5. cfinterface
  6. cflock
  7. cfscript
  8. cfthread
2. Communications tags
3. Database manipulation tags
4. Data output tags
  1. cfchart
5. Debugging tags
  1. cfdump
  2. cftimer
  3. cftrace
6. Exception handling tags
  1. cfcatch
  2. cferror
  3. cffinally
  4. cfrethrow
  5. cfthrow
  6. cftry
7. Extensibility tags
  1. cfchart
  2. cfchartdata
  3. cfchartseries
  4. cfcollection
  5. cfcomponent
  6. cfexecute
  7. cfftp
  8. function
  9. cfindex
  10. cfinterface
  11. cfinvoke
  12. cfinvokeargument
  13. cfobject
  14. cfproperty
  15. cfreport
  16. cfreportparam
  17. cfreturn
  18. cfsearch
  19. cfsharepoint
  20. cfspreadsheet
  21. cfwddx
  22. cfxml
8. File management tags
  1. cfdirectory
  2. cffile
  3. cffileupload
  4. cfftp
  5. cfzip
  6. cfzipparam
9. Flow-control tags
  1. cfabort
  2. cfbreak
  3. cfcase
  4. cfcontinue
  5. cfdefaultcase
  6. cfelse
  7. cfelseif
  8. cfexecute
  9. cfexit
  10. cfif
  11. cfinclude
  12. cflocation
  13. cfloop
  14. cfrethrow
  15. cfswitch
  16. cfthrow
  17. cftry
10. Forms tags
  1. cfapplet
  2. cfcalendar
  3. cffileupload
  4. cfform
  5. cfformgroup
  6. cfformitem
  7. cfgrid
  8. cfgridcolumn
  9. cfgridrow
  10. cfgridupdate
  11. cfinput
  12. cfpdf
  13. cfpdfform
  14. cfpdfformparam
  15. cfpdfparam
  16. cfpdfsubform
  17. cfselect
  18. cfslider
  19. cftextarea
  20. cftree
  21. cftreeitem
11. Internet Protocol tags
  1. cfajaximport
  2. cfajaxproxy
  3. cfftp
  4. cffeed
  5. cfimap
  6. cfhttp
  7. cfhttpparam
  8. cfldap
  9. cfmail
  10. cfmailparam
  11. cfmailpart
  12. cfpop
  13. cfsprydataset
12. Page processing tags
  1. cfcache
  2. cfcontent
  3. cfflush
  4. cfheader
  5. cfhtmlhead
  6. cfinclude
  7. cfprocessingdirective
  8. cfsetting
  9. cfsilent
13. Security tags
14. Variable manipulation tags
  1. cfcookie
  2. cfdump
  3. cfparam
  4. cfregistry
  5. cfsavecontent
  6. cfschedule
  7. cfset
  8. cfsetting
15. Other tags
  1. cfimage
  2. cflog
  3. cfregistry
Tags a-b
Tags c
Tags f
Tags g-h
1. cfgraph
2. cfgraphdata
3. cfgrid
4. cfgridcolumn
5. cfgridrow
6. cfgridupdate
7. cfheader
8. cfhtmlhead
9. cfhtmltopdf
10. cfhtmltopdfitem
11. cfhttp
12. cfhttpparam
Tags i
1. cfif
2. cfimage
3. cfimap
4. cfimapfilter
5. cfimpersonate
6. cfimport
7. cfinclude
8. cfindex
9. cfinput
10. cfinsert
11. cfinterface
12. cfinvoke
13. cfinvokeargument
Tags j-l
Tags m-o
Tags p-q
1. cfparam
2. cfpdf
3. cfpdfform
4. cfpdfformparam
5. cfpdfparam
6. cfpdfsubform
7. cfpod
8. cfpop
9. cfpresentation
10. cfpresentationslide
11. cfpresenter
12. cfprint
13. cfprocessingdirective
14. cfprocparam
15. cfprocresult
16. cfprogressbar
17. cfproperty
18. cfquery
19. cfqueryparam
Tags r-s
1. cfregistry
2. cfreport
3. cfreportparam
4. cfrethrow
5. cfreturn
6. cfsavecontent
7. cfschedule
8. cfscript
9. cfsearch
10. cfselect
11. cfservlet
12. cfservletparam
13. cfset
14. cfsetting
15. cfsharepoint
16. cfsilent
17. cfslider
18. cfspreadsheet
19. cfsprydataset
20. cfstoredproc
21. cfswitch
Tags t
1. cftable
2. cftextarea
3. cftextinput
4. cfthread
5. cfthrow
6. cftimer
7. cftooltip
8. cftrace
9. cftransaction
10. cftree
11. cftreeitem
12. cftry
Tags u-z
1. cfupdate
2. cfwddx
3. cfwebsocket
4. cfwindow
5. cfxml
6. cfzip
7. cfzipparam

CFML Reference

Cloud services

CFML Reference User Guide
ColdFusion functions
ColdFusion tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

Alert:

FORMAT="flash" has been removed in Adobe ColdFusion (2025 release).

For a full list of deprecated features, Deprecated features.

The cfchart tag in ColdFusion is used to generate and display charts. It can be used to create various types of charts, such as bar, line, pie, area, horizontal bar, cone, curve, cylinder, step, scatter, and other charts.

Syntax

<cfchart

format="html"

style = "JSON filename">

</cfchart>

<cfchart format="html" style = "JSON filename"> </cfchart>

<!--- This syntax uses a JSON file to specify the chart style. --->
<cfchart 
    format="html" 
    style = "JSON filename"> 
</cfchart>

<cfchart

alpha = "value between 0 and 1"

arrows = "JSON string representation"

aspect3D = "JSON string representation"

background = "JSON string representation"

base64="true | false"

bevel = "JSON string representation"

border = "JSON string representation"

backgroundColor = "hexadecimal value|web color"

chartHeight = "integer number of pixels"

chartWidth = "integer number of pixels"

crosshair = "JSON string representation"

dataBackgroundColor = "hexadecimal value|web color"

fill = "JSON string representation"

font = "font name"

fontBold = "yes|no"

fontItalic = "yes|no"

fontSize = "font size"

foregroundColor = "hexadecimal value|web color"

format = "jpg|png|html|svg"

gridlines = "integer number of lines"

height = "height in pixels"

width = "width in pixels"

ID = "chart identifier"

labels = "JSON string representation"

legend = "JSON string representation"

labelFormat = "number|currency|percent|date"

markers = "JSON string representation"

markerSize = "integer number of pixels"

name = "string"

options="struct"

pieSliceStyle = "solid|sliced"

plot = "JSON string representation"

plotarea = "JSON string representation"

preview = "JSON string representation"

refresh = "canvas|flash|svg|vml"

renderer = "canvas|flash|svg|vml"

scales = "comma-seperated list of axes"

scaleR="scales for pie and gauge charts"

scaleFrom = "integer minimum value"

scaleTo = "integer maximum value"

seriesPlacement = "default|cluster| stacked|percent"

show3D = "yes|no"

showBorder = "yes|no"

showLegend = "yes|no"

showMarkers = "yes|no"

showScaleMarkers="yes|no"

showXGridlines = "yes|no"

showYGridlines = "yes|no"

sortXAxis = "yes|no"

tipBGColor = "hexadecimal value|web color"

title = "title of chart"

tooltip = "JSON string representation"

theme="default or custom theme"

url = "onClick destination page"

x="x coordinate"

xAxis = "JSON string representation"

xAxis2 = "JSON string representation"

xAxisTitle = "title text"

xAxisType = "scale|category"

xAxisValues = "Array of values"

xOffset = "number between -1 and 1"

y="y coordinate"

yAxis = "JSON string representation"

yAxis2 = "JSON string representation"

yAxisTitle = "title text"

yAxisType = "scale|category"

yAxisValues = "Array of values"

yOffset = "number between -1 and 1"

zoom = "JSON string representation"

</cfchart>

<cfchart alpha = "value between 0 and 1" arrows = "JSON string representation" aspect3D = "JSON string representation" background = "JSON string representation" base64="true | false" bevel = "JSON string representation" border = "JSON string representation" backgroundColor = "hexadecimal value|web color" chartHeight = "integer number of pixels" chartWidth = "integer number of pixels" crosshair = "JSON string representation" dataBackgroundColor = "hexadecimal value|web color" fill = "JSON string representation" font = "font name" fontBold = "yes|no" fontItalic = "yes|no" fontSize = "font size" foregroundColor = "hexadecimal value|web color" format = "jpg|png|html|svg" gridlines = "integer number of lines" height = "height in pixels" width = "width in pixels" ID = "chart identifier" labels = "JSON string representation" legend = "JSON string representation" labelFormat = "number|currency|percent|date" markers = "JSON string representation" markerSize = "integer number of pixels" name = "string" options="struct" pieSliceStyle = "solid|sliced" plot = "JSON string representation" plotarea = "JSON string representation" preview = "JSON string representation" refresh = "canvas|flash|svg|vml" renderer = "canvas|flash|svg|vml" scales = "comma-seperated list of axes" scaleR="scales for pie and gauge charts" scaleFrom = "integer minimum value" scaleTo = "integer maximum value" seriesPlacement = "default|cluster| stacked|percent" show3D = "yes|no" showBorder = "yes|no" showLegend = "yes|no" showMarkers = "yes|no" showScaleMarkers="yes|no" showXGridlines = "yes|no" showYGridlines = "yes|no" sortXAxis = "yes|no" tipBGColor = "hexadecimal value|web color" title = "title of chart" tooltip = "JSON string representation" theme="default or custom theme" url = "onClick destination page" x="x coordinate" xAxis = "JSON string representation" xAxis2 = "JSON string representation" xAxisTitle = "title text" xAxisType = "scale|category" xAxisValues = "Array of values" xOffset = "number between -1 and 1" y="y coordinate" yAxis = "JSON string representation" yAxis2 = "JSON string representation" yAxisTitle = "title text" yAxisType = "scale|category" yAxisValues = "Array of values" yOffset = "number between -1 and 1" zoom = "JSON string representation" </cfchart>

<!--- This syntax uses the attributes of the cfchart tag to specify the chart style. --->  
<cfchart  
alpha = "value between 0 and 1"  
arrows = "JSON string representation"  
aspect3D = "JSON string representation"  
background = "JSON string representation"  
base64="true | false" 
bevel = "JSON string representation"  
border = "JSON string representation"  
backgroundColor = "hexadecimal value|web color"  
chartHeight = "integer number of pixels"  
chartWidth = "integer number of pixels"  
crosshair = "JSON string representation"  
dataBackgroundColor = "hexadecimal value|web color" 
fill = "JSON string representation"  
font = "font name"  
fontBold = "yes|no"  
fontItalic = "yes|no"  
fontSize = "font size"  
foregroundColor = "hexadecimal value|web color"  
format = "jpg|png|html|svg"  
gridlines = "integer number of lines"  
height = "height in pixels" 
width = "width in pixels" 
ID = "chart identifier"  
labels = "JSON string representation"  
legend = "JSON string representation"  
labelFormat = "number|currency|percent|date"  
markers = "JSON string representation"  
markerSize = "integer number of pixels"  
name = "string"  
options="struct"
pieSliceStyle = "solid|sliced"  
plot = "JSON string representation"  
plotarea = "JSON string representation"  
preview = "JSON string representation"  
refresh = "canvas|flash|svg|vml"  
renderer = "canvas|flash|svg|vml"  
scales = "comma-seperated list of axes"  
scaleR="scales for pie and gauge charts"
scaleFrom = "integer minimum value"  
scaleTo = "integer maximum value"  
seriesPlacement = "default|cluster| stacked|percent"  
show3D = "yes|no"  
showBorder = "yes|no"  
showLegend = "yes|no"  
showMarkers = "yes|no" 
showScaleMarkers="yes|no"
showXGridlines = "yes|no"  
showYGridlines = "yes|no"  
sortXAxis = "yes|no"  
tipBGColor = "hexadecimal value|web color"  
title = "title of chart"  
tooltip = "JSON string representation"  
theme="default or custom theme"
url = "onClick destination page"  
x="x coordinate"
xAxis = "JSON string representation"  
xAxis2 = "JSON string representation"  
xAxisTitle = "title text"  
xAxisType = "scale|category"  
xAxisValues = "Array of values"  
xOffset = "number between -1 and 1"  
y="y coordinate"
yAxis = "JSON string representation"  
yAxis2 = "JSON string representation"  
yAxisTitle = "title text"  
yAxisType = "scale|category"  
yAxisValues = "Array of values"  
yOffset = "number between -1 and 1" 
zoom = "JSON string representation"  
</cfchart>

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

Version	Changes
ColdFusion (2025 release)	Removed flash format. Added svg as format. Added the following attributes: x y markers scaleR showScaleMarkers options theme
ColdFusion (2018 release) Update 5	Added attribute base64.
ColdFusion (2018 release)	Added support for responsive client-side charts. You can specify the height and width in percentages.
ColdFusion 11	The server-side charting introduced in ColdFusion 10 that allowed you to create highly interactive charts has been further enhanced to produce visually more appealing charts. Note that the new look and feel will not be available for the following tag attributes: cfchart labelFormat seriesPlacement with percent as the value sortXAxis xAxisType yAxisType xOffset yOffset cfchartseries markerStyle: letterx, mcross, snow, and rcrosspaintStyle
	The XML format style has been removed. ColdFusion provides a utility to convert XML styles (used by the old charting system) to JSON styles (used by the new charting system). To perform this conversion, you need to use cfchart_xmltojson.bat (or cfchart_xmltojson.sh) available in <cfusion_home>/bin folder: cfchart_xmltojson.bat <xml_file_path> The converted JSON style will be created in the same location as the XML file.
ColdFusion 10	Added the following new attributes: alpha arrows aspect3D background bevel border crosshair fill format height id labels legend plot plotarea preview refresh renderer scales type tooltip width xaxis axis2 xaxisvalues yaxis yaxis2 yaxisvalues zoom
ColdFusion 8	Added the new attribute showLegend to the chart style files, which are the JSON files located in the charting\styles directory- This attribute displays an entry for each point and is applicable only to charts that contain a single series. By default, the value of showLegend is set to true. To turn off this feature, you can either modify the setting in all the chart style files, or use a custom style file.
ColdFusion MX 7.01	Changed documentation to state that the fontSize attribute can accept a number that is not an integer.
ColdFusion MX 7	Added style and title attributes. Added support for eight-digit hexadecimal values to specify RGB color and transparency. Removed the rotated attribute.
ColdFusion MX 6.1	Added the xAxisType and yAxisType attributes. 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	1	Alpha (transparency) level of the background. Valid values range from 0 (transparent) to 1 (opaque).
arrows	Opt		Creates an arrow for pointing out data or other chart items. JSON string representation of an array of structs that contain values such as to, from, size, and label. See example below.
aspect3D	Opt		JSON string representation of struct that defines the angle of 3D aspect.The valid struct keys are angle, depth, and true3d. The true3d key determines whether the chart uses a true 3D engine or an isometric view. Disabling true3d forces an isometric view. See examples below.
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. For all chart formats, a URL is supported. For format="jpg" and format="png", an absolute path is also supported. For format="html" and format="flash", a relative path is also supported. position: Defines the position of the background image. See example below.
backgroundColor	Optional		Color of the area between the data background and the chart border, around labels and around the legend. Hexadecimal value or supported named color; see the name list in Usage. For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.
base64	Opt	False	This attribute is used for server-side charting.
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.
chartHeight	Optional	240	Chart height; integer number of pixels.
chartWidth	Optional	320	Chart width; integer number of pixels.
crosshair	Opt		A struct of keys related to crosshair such as: line-color: Sets the color of the crosshair lines. alpha: Defines the alpha transparency level of the line. line-style: Defines the line style. See example below.
dataBackgroundColor	Optional	white	Color of area around chart data.Hexadecimal value or supported named color; see the name list in the 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.
fill	Opt		A struct of keys related to fill such as: angle: Sets the angle at which a linear fill is displayed. A fill angle of zero displays a vertical gradient from top (background-color-1) to bottom (background-color-2). offset-x: Set x-axis offset for background gradient. offset-y: Set y-axis offset for background gradient. See example below.
font	Optional	arial	Name of text font: arial times courier arialunicodeMS. This option is required, if you are using a double-byte character set on UNIX, or using a double-byte character set in Windows with a file type of Flash.
fontBold	Optional	no	Whether to make the text bold: yes no
fontItalic	Optional	no	Whether to make the text italicized: yes no
fontSize	Optional	11	Font size. If the number is not an integer, ColdFusion rounds the number up to the next integer.
foregroundColor	Optional	black	Color of text, grid lines, and labels.Hexadecimal value or supported named color; see name list in the 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.
format	Required		File format in which to save the graph: html jpg png svg
gridlines	Optional	10, including top and bottom	Number of grid lines to display on the value axis, including axis; positive integer.
height	Opt		Chart height; integer; number of pixels. cfchart calculates the height as a percentage of the available height of the chart.
ID	Opt		ID of the chart. Used to get the underlying chartobject.
labels	Opt		An array of structs used to display custom text or images on the chart, for example, author or chart information. See example below.
labelFormat	Optional	number	Format for y-axis labels: number currency percent date
legend	Opt		A struct used to define the legend attributes, for example, background- color or margin-top. See example below.
markers	Opt		Add markers to the chart.
markerSize	Optional	(Automatic)	Size of data point marker in pixels; integer.
name	Optional		Page variable name; string. Generates the graph as binary data and assigns it to the specified variable. Suppresses chart display. You can use the name value in the cffile tag to write the chart to a file.
options	Optional		Struct to specify stying of boxplot chart elements.
pieSliceStyle	Optional	sliced	Applies to the cfchartseries type attribute value pie. solid: displays pie as if unsliced. sliced: displays pie as if sliced.
plot	Opt		A struct of keys such as animation, aspect, margin, dynamic, fixedValue, and marker used to style the plotting. See example below.
plotarea	Opt		A struct of keys such as position and margin used to style the plot area.
preview	Opt		A struct of keys such as visible and margin to control chart preview. Additional keys are as follows: live: Sets whether the chart is updated when the preview active area is being moved. Default is false for classic theme and true for light/dark themes. The graph will update only when the mouse is released. preserve-zoom: Sets whether the zoom level is preserved when a chart is altered or reloaded.
refresh	Opt		A struct of keys such as type, url, and interval to create dynamic charts.
renderer	Opt		Specify the rendering method. You must remove the format=”html” setting and then set the renderer to “flash”. The supported values are flash, svg, and vml.
scaleFrom	Optional	Determinedby data	Y-axis minimum value; integer.
scales	Opt		Comma-separated list of axis against which to plot the chart, for example, x,y2.
scaleR	Opt		Configure scales for pie and gauge charts.
showScaleMarkers	Opt		Specify whether to show markers along the axes.
scaleTo	Optional	Determinedby data	Y-axis maximum value; integer.
seriesPlacement	Optional	default	Relative positions of series in charts that have more than one data series. default: ColdFusion determines relative positions, based on graph types cluster stacked percent
show3D	Optional	no	Whether to display the chart with three-dimensional appearance: yes no
showBorder	Optional	no	Whether to display a border around the chart: yes no
showLegend	Optional	yes	Whether to display the legend if the chart contains more than one data series: yes no
showMarkers	Optional	yes	Whether to display markers at data points in line, curve, and scatter graphs: yes no
showXGridlines	Optional	no	Whether to display x-axis gridlines: yes no
showYGridlines	Optional	yes	Whether to display y-axis gridlines: yes no
sortXAxis	Optional	no	Whether to display column labels in alphabetic order along the x axis: yes no Ignored if the xAxisType attribute is scale.
style	Optional		JSON file or string to use to specify the style of the chart. In ColdFusion 11, the XML format style has been removed.
theme	Optional		Add default or custom themes to your chart.
title	Optional		Title of the chart.
tipbgcolor	Optional	white	Background color of tips. Applies only to Flash format graph files. Hexadecimal value or supported named color; see the name list in the Usage section. For a hexadecimal value, use the form "##xxxxxx", where x = 0-9 or A-F; use two number signs or none.
tooltip	Optional		A struct of keys used to style the tool tip such as background, font,or border.
type	Optional		Type of chart.
url	Optional		URL to open if the user clicks item in a data series; the onClick destination page. You can specify variables within the URL string; ColdFusion passes current values of the variables. $VALUE$: the value of the selected row. If none, the value is an empty string. $ITEMLABEL$: the label of the selected item. If none, the value is an empty string. $SERIESLABEL$: the label of the selected series. If none, the value is an empty string, for example: "somepage.cfm?item=$ITEMLABEL$&series=$SERIESLABEL$&value=$VALUE$ "javascript:...": executes a client-side script.
x	Optional		Integer/Percentage. X coordinate of the upper-left corner. x=0, y=0 defines the upper-left coordinate (0,0) from where a cfchart output renders.
width	Optional	320	Width of the Chart in pixels.
xAxis	Optional		A struct of keys used to style x axis such as format, guide, item, zooming, and label. See example below.
xAxis2	Optional		A struct of keys used to style second x axis such as format, guide, item, and label, which is on the top of the chart.
xAxisTitle	Optional		Title that appears on the x axis; text.
xAxisType	Optional	category	Whether the x axis indicates data or is numeric: category: The axis indicates the data category. Data is sorted according to the sortXAxis attribute. scale: The axis is numeric. All cfchartdata item attribute values must be numeric. The x axis is automatically sorted numerically.
xAxisvalues	Opt		An array of values to be displayed on x axis.
xOffset	Optional	0.1	Number of units by which to display the chart as angled, horizontally.Applies if show3D="yes". The number can be between 1 and 1,where "-1" specifies 90 degrees left and "1" specifies 90 degrees right.
y	Optional		Integer/Percentage. Y coordinate of the upper-left corner. x=0, y=0 defines the upper-left coordinate (0,0) from where a cfchart output renders.
yaxis	Opt		A struct of keys used to style y axis such as format, guide, item, and label.
yaxis2	Opt		A struct of keys used to style second y axis such as format, guide,item, and label, which is on the top of the chart.
yAxisTitle	Optional		Title of the y axis; text.
yAxisType	Optional	category	Currently has no effect, as the y axis is always used for data values.
yaxisvalues	Opt		An array of values to be displayed on y axis.
yOffset	Optional	0.1	Number of units by which to display the chart as angled, vertically.Applies if show3D="yes". The number can be between 1 and 1, where "-1" specifies 90 degrees left and "1" specifies 90 degrees right.
width	Optional		Integer/Percentage. cfchart calculates the width as a percentage of the available width of the chart.
zoom	Opt		A struct of keys to be applied when you zoom the chart such as alpha, background, or bevel. See example below.

Usage

The cfchart tag defines a container in which a graph displays: its height, width, background color, labels, and so on. The cfchartseries tag defines the chart style in which data displays: bar, line, pie, and so on. The cfchartdata tag defines a data point.Data is passed to the cfchartseries tag in the following ways:

As a query
As data points, using the cfchartdata tag
For the font attribute value ArialUnicodeMS, the following rules apply:
In UNIX, for all type values, to render a double-byte character set, select this value.
If this value is selected, the fontBold and fontItalic attributes have no effect.
The following table lists W3C HTML 4 named color value or hexadecimal values that the color attribute accepts:

Color name	RGB value
Aqua	##00FFFF
Black	#000000
Blue	##0000FF
Fuchsia	##FF00FF
Gray	##808080
Green	##008000
Lime	##00FF00
Maroon	##800000
Navy	##000080
Olive	##808000
Purple	##800080
Red	##FF0000
Silver	##C0C0C0
Teal	##008080
White	##FFFFFF
Yellow	##FFFF00

For all other color values, enter the hexadecimal value. You can enter a six-digit value, which specifies the RGB value, or an eight-digit value, which specifies the RGB value and the transparency. The first two digits of an eight-digit hexadecimal value specify the degree of transparency, with FF indicating opaque and 00 indicating transparent. Values between 00 and FF are allowed.
For more color names that are supported by popular browsers, go to www.w3.org/TR/css3-color. You can specify whether charts are cached in memory, the number of charts to cache, and the number of chart requests that ColdFusion can process concurrently. To set these options in the ColdFusion Administrator, select Server Settings>Charting.
The following attributes are not supported: format, labelformat , seriesplacement with percent as the value, sort, xAxis, url , xAxisType, xOffset, yAxisType, and yOffset.

Note:

If you are using <!DOCTYPE html>, and not DOCTYPE, cfchart uses quarks mode that is supported by browsers. For standard HTML output, the width and height must have html standard units i.e. px, % etc. In quarks mode, the width and height with units falls back to pixel.

Note:

Format="html" does not work when using <!DOCTYPE html> in a cfchart code.

Quickly create a chart

This section runs through creating a basic bar and pie chart. It’s meant to paint the big picture and suggest a workflow, before we descend into the detailed treatment of the key components of creating a chart using the cfchart tag.

Let’s get started with creating a bar chart.

For a simple bar chart, you'll need some data to represent. You can use hard-coded values or retrieve data from a database using <cfquery>.

</cfchartseries>

</cfchart>

<cfset chartData = [10, 20, 30, 40, 50]> <!--- example data--->  

<cfchart format="html" xaxistitle="Categories" yaxistitle="Values" title="Bar Chart Example" type="bar" showlegend="false"> 
    <cfchartseries type="bar"> 
        <cfchartdata item="Category 1" value="#chartData[1]#"> 
        <cfchartdata item="Category 2" value="#chartData[2]#"> 
        <cfchartdata item="Category 3" value="#chartData[3]#"> 
        <cfchartdata item="Category 4" value="#chartData[4]#"> 
        <cfchartdata item="Category 5" value="#chartData[5]#"> 
    </cfchartseries> 
</cfchart>

On similar lines, create a pie chart.

As you’d defined the data for the bar chart, do the same here:

</cfchartseries>

</cfchart>

<cfchart format="png" chartWidth="600" chartHeight="400" pieSliceStyle="sliced"> 
    <cfchartseries type="pie" serieslabel="Website Traffic 2024"> 
        <cfchartdata item="January" value="#randRange(500000,1000000)#"> 
        <cfchartdata item="February" value="#randRange(500000,1000000)#"> 
        <cfchartdata item="March" value="#randRange(500000,1000000)#"> 
        <cfchartdata item="April" value="#randRange(500000,1000000)#"> 
        <cfchartdata item="May" value="#randRange(500000,1000000)#"> 
        <cfchartdata item="June" value="#randRange(500000,1000000)#"> 
    </cfchartseries>
</cfchart>

Basics of cfchart

Basic syntax and structure

In ColdFusion, the cfchart tag is used to create charts and graphs within your applications. The basic syntax of the cfchart tag involves specifying the chart type, chart data, and various other attributes to customize the appearance and functionality of the chart. Here's an overview of the basic syntax of cfchart in ColdFusion:

<cfchart

format="png|jpg|html|svg"

chartWidth="width"

chartHeight="height"

title="Chart Title"

type="chart_type">

<cfchartseries

type="series_type"

query="query_name"

itemcolumn="column_name"

valuecolumn="column_name">

</cfchartseries>

</cfchart>

<cfchart  
    format="png|jpg|html|svg" 
    chartWidth="width" 
    chartHeight="height" 
    title="Chart Title" 
    type="chart_type"> 

    <!-- Define series data --> 
    <cfchartseries  
        type="series_type" 
        query="query_name" 
        itemcolumn="column_name" 
        valuecolumn="column_name"> 
    </cfchartseries> 
    
<!-- Define other series or additional chart customization here --> 
 </cfchart>

Different types of charts in ColdFusion

Pie Chart: Displays data in a circular graph, illustrating the proportions of a whole.
Bar Chart: Uses rectangular bars to compare values across categories or display data trends over time.
Line Chart: Shows data trends or changes over a continuous interval using lines connecting data points.
Scatter Chart: Represents data points on a two-dimensional plane to demonstrate correlations or distributions.
Area Chart: Like a line chart, the area below the line is filled, emphasizing the cumulative effect of changing values.
Bubble Chart: Displays data in bubbles (or spheres) with different sizes to represent multiple data dimensions.
Gauge Chart: Illustrates data within a gauge-like format, often used to display progress or performance metrics.
Column Chart: Like a bar chart, the bars are vertically oriented.
Stacked Chart: Shows multiple data series stacked on top of one another to compare total values and their constituents.
Bullet chart: A bullet chart is a bar chart designed to display performance data efficiently. It encodes multiple data elements, including an observed value, a target value, and a range of values for grading. This chart type is ideal for making comparisons, such as measuring progress against a target or series of thresholds.
Cone chart: A cone chart is a data visualization tool used to represent portions or percentages of a whole, similar to pie charts. However, cone charts also display hierarchy, with the highest value at the top of the cone, which has the most expansive area.
Pyramid Chart: A pyramid chart is a visual representation showing a series of steps or categories in a hierarchical order, arranged in a triangle shape. It's often used to illustrate processes, systems, or population distribution.
Box Plot: A box plot displays information such as the median, quartiles, and potential outliers. It helps compare the distribution of data across different categories or groups.
Donut: A donut chart is a circular chart like a pie chart but with a hole in the center. This hole creates a ring-like appearance, from where the name "donut" comes. Donut charts represent proportions or percentages of a whole within a data set, like pie charts.
Histogram: A histogram represents numerical data that shows the frequency distribution of data points across a continuous range of numerical values.
Floating Bar: A floating bar chart visually represents numerical data where the bars don't start at zero on the Y-axis. Instead, the bars are positioned at a specific value on the Y-axis, which can be different for each bar. This type of chart is proper when comparing values that are not zero-based, such as changes in a value over time or comparing two different sets of data with different starting points.
Vertical Area chart: A vertical area chart is a type of chart that displays quantitative data by using continuous lines, like a line chart. However, the area beneath the lines is filled with a particular color for each series, making it easier to emphasize changes in values from several sets of similar data.
Stepped area: A Stepped Area is a type of chart that displays data points connected by horizontal and vertical line segments, resembling the steps of a staircase.
Curved area: A curved area chart displays data points connected by curved lines rather than straight lines. This chart type helps smooth out the data and make it easier to visualize trends.

Provide data to the cfchart tag

Use static data

You can use static data to generate a chart using the cfchart tag in ColdFusion by providing the data directly within the chart and series tags. This way, you can create a chart without linking it to a data source such as a query.

Follow the steps below to use static data for charts:

Define the data you want to display in the chart. This can be done by creating an array or a structure containing the data points you wish to visualize.
Use the cfchart tag in your ColdFusion code to create the chart. Specify the type of chart you want to generate (e.g., pie, bar, line) and provide the data you defined in step 1 as the source for the chart.
You can customize the chart's appearance by setting attributes such as colors, labels, titles, and legends within the cfchart tag.
Render the chart in your ColdFusion application by including the cfchart tag within your ColdFusion page or template.

Example

</cfchartseries>

</cfchart>

<cfchart format="html" chartheight="300" chartwidth="400" title="Monthly Sales" type="area"> 
    <cfchartseries type="area"> 
        <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 cfchart tag creates an area chart with specified dimensions (chartheight and chartwidth) and a title (title).
The type attribute of the cfchart tag is set to "area", indicating that the chart should be an area chart.
The cfchartseries tag defines the type of the series as "area".
Inside the cfchartseries tag, the cfchartdata tags specify the data points to be plotted. Each cfchartdata tag specifies an item (x-axis value) and a value (y-axis value) for each data point.

Use data from a database

To create a chart using the cfchart tag in ColdFusion with data from a database, you first need to fetch the data from the database using a cfquery tag. Once you have the data in a query object, you can use it in the cfchart and cfchartseries tags to generate the chart.

Here's an example of how you might create an area chart using data from a database:

select * from orders

order by orderdate

</cfquery>

</cfchart>

<cfquery name="getSalesData" datasource="art"> select * from orders order by orderdate </cfquery> <cfchart format="html" chartheight="400" chartwidth="600" title="Sales Over Time"> <cfchartseries type="curve" query="getSalesData" itemColumn="orderdate" valueColumn="tax"/> </cfchart>

<cfquery name="getSalesData" datasource="art"> 
    select * from orders 
    order by orderdate 
</cfquery> 

<cfchart format="html" chartheight="400" chartwidth="600" title="Sales Over Time"> 
    <cfchartseries type="curve" query="getSalesData" itemColumn="orderdate" valueColumn="tax"/> 
</cfchart>

Customize charts

Using the cfchart tag, you can customize your charts for the following purposes:

Charts help represent data visually, making it easier to interpret trends, patterns, and comparisons. This is especially useful for complex datasets.
Customized charts provide a more engaging and interactive user experience.
Customization options allow you to emphasize specific aspects of the data, such as highlighting particular series, categories, or points of interest.
By customizing charts, you can make them more accessible for users with different needs, such as adjusting color schemes for color blindness.
Customizing charts allows you to align them with your brand's colors, fonts, and style, providing a consistent visual identity across your application.
Customized charts can present data in a specific context, such as reports, dashboards, or data-driven applications.
ColdFusion's charting capabilities offer customization options such as tooltips, legends, and labels, which provide more information and interactivity to the end user.
Customization allows you to combine different chart types (e.g., bar, line, pie) and series in a single chart, allowing for more nuanced data presentations.

Custom JSON styles in charts

The cfchart tag uses JSON-based styles, which are easily customizable. ColdFusion provides default styles for each type of chart, but you can override the style using your own style file. The following example uses a custom style file to customize the title's font and background.

You can define the customization of a chart in ColdFusion using the cfchart tag and a JSON object for styling options. ColdFusion's cfchart tag supports a graphset attribute, which can take a JSON string as its value. This allows you to specify various customization options for the chart, including chart type, dimensions, colors, titles, labels, and other visual settings.

Here’s an example demonstrating how to create a line chart using the cfchart tag with data from a JSON string and customization defined in a JSON object using the graphset attribute:

my_custom_style.json

{

"graphset" : [

{

"type" : "bar",

"title" : {

"font-size" : 18,

"color" : "#FF0000",

"bold" : true,

"font-family" : "Verdana",

"background-color" : "#cccccc",

"border-color" : "#cccccc",

"border-width" : 1

}

]

}

{ "graphset" : [ { "type" : "bar", "title" : { "font-size" : 18, "color" : "#FF0000", "bold" : true, "font-family" : "Verdana", "background-color" : "#cccccc", "border-color" : "#cccccc", "border-width" : 1 } } ] }

{
 "graphset" : [
  {
   "type" : "bar",
   "title" : {
    "font-size" : 18,
    "color" : "#FF0000",
    "bold" : true,
    "font-family" : "Verdana",
    "background-color" : "#cccccc",
    "border-color" : "#cccccc",
    "border-width" : 1
   }
  }
 ]
}

Use the JSON in the cfm file, as shown below:

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"

style="my_custom_style.json" title="Sales report">

</cfchartseries>

</cfchart>

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="my_custom_style.json" title="Sales report">
    <cfchartseries>
        <cfchartdata item="2012" value=#randrange(10,100)#>
        <cfchartdata item="2013" value=#randrange(10,100)#>
        <cfchartdata item="2014" value=#randrange(10,100)#>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
    </cfchartseries>
</cfchart>

Output

Get help faster and easier

New user?

Get started with cfchart

Category

Syntax

See also

History

Attributes

Usage

Quickly create a chart

Basics of cfchart

Basic syntax and structure

Different types of charts in ColdFusion

Provide data to the cfchart tag

Use static data

Use data from a database

Customize charts

Custom JSON styles in charts

Get help faster and easier

Share this page

Ask the Community

Contact Us