Customize a ColdFusion chart using 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

ColdFusion provides the <cfchart> tag to create and customize charts for web applications. By leveraging various attributes and nested tags, users can modify chart appearance, style, and behavior.

The <cfchart> tag generates a chart with default settings. Users can customize it using attributes such as format, show3d, chartHeight, chartWidth, and more.

Example

</cfchartseries>

</cfchart>

<cfchart format="html" chartheight="300" chartwidth="500">
    <cfchartseries type="bar">
        <cfchartdata item="Q1" value="100"/>
        <cfchartdata item="Q2" value="150"/>
        <cfchartdata item="Q3" value="200"/>
    </cfchartseries>
</cfchart>

Customize chart appearance
Customize chart colors
Customize labels and titles
Customize data representation
Customizing chart legends and tooltips
Customize axes and gridlines
Create a dynamic refresh chart
Using the arrows attribute
Using the aspect3d attribute when true3d=false
Using the aspect3d attribute when true3d=true
Using the background attribute
Using the border attribute
Using the crosshair attribute

Using the fill attribute
Using the labels attribute
Using the legend attribute
Using the plot attribute
Using the preview attribute
Using the seriesPlacement attribute
Using the scales attribute
Using the xAxis attribute
Using the zoom attribute
Using height, width, and percentage
Using the bevel attribute
Using the axis attribute

Customize chart appearance

Set chart dimensions

chartWidth and chartHeight define the size of the chart in pixels.

Chart format

Supported formats: png, jpg, html, svg.

Enable 3D effects

Use show3d="yes" to add a 3D effect to charts.

Customize chart colors

Background and border colors

Use backgroundColor to set the background color.
Use border to enable or disable chart borders.

Customize series colors

Define colors for different data series using colorlist in <cfchartseries>.

Customize labels and titles

Chart title

title: Defines the main title of the chart.
xAxisTitle and yAxisTitle: Label the axes for bar and line charts.

Customize data representation

Using <cfchartseries> to define data

The <cfchartseries> tag specifies the data type and values.

</cfchartseries>

</cfchart>

<cfchart format="png" type="bar">
    <cfchartseries type="bar">
        <cfchartdata item="January" value="5000">
        <cfchartdata item="February" value="7000">
        <cfchartdata item="March" value="6000">
    </cfchartseries>
</cfchart>

Multiple series for comparative data

Add multiple <cfchartseries> for grouped bar charts or multi-line charts.

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart format="html" type="bar">
    <cfchartseries type="bar" seriesLabel="Product A">
        <cfchartdata item="Q1" value="2000">
        <cfchartdata item="Q2" value="3000">
    </cfchartseries>
    <cfchartseries type="bar" seriesLabel="Product B">
        <cfchartdata item="Q1" value="2500">
        <cfchartdata item="Q2" value="3500">
    </cfchartseries>
</cfchart>

Dynamically poopulating data from a query

SELECT month, revenue FROM sales_table

</cfquery>

</cfloop>

</cfchartseries>

</cfchart>

<cfquery name="salesData" datasource="myDB"> SELECT month, revenue FROM sales_table </cfquery> <cfchart format="html" type="line"> <cfchartseries type="line"> <cfloop query="salesData"> <cfchartdata item="#month#" value="#revenue#"> </cfloop> </cfchartseries> </cfchart>

<cfquery name="salesData" datasource="myDB">
    SELECT month, revenue FROM sales_table
</cfquery>

<cfchart format="html" type="line">
    <cfchartseries type="line">
        <cfloop query="salesData">
            <cfchartdata item="#month#" value="#revenue#">
        </cfloop>
    </cfchartseries>
</cfchart>

Customizing chart legends and tooltips

Enabling and styling legends

showLegend: Displays the legend.
legendPosition: Places it on top, bottom, left, or right.

Use tooltips for data points

showMarkers="yes" displays interactive markers.
markerSize adjusts marker size.

Customize axes and gridlines

Adjust axis scale

xAxis and xAxis2: Format X axes and sexond X axes.
yAxis and yAxis2: Format Y axes and sexond Y axes.

Display and hide gridlines

Set showXGridlines or showYGridlines to TRUE or FALSE.

Create a dynamic refresh chart

A major use-case of dynamic charts is the depiction of real-time data. In such cases, the chart needs to show new data at regular intervals of time.

Using a full refresh feed, you can refresh the whole chart at regular intervals. When there is no relevance for the old values and the chart only needs to show the latest numbers, use a full refresh chart.

In such a chart, you need a URL from which the chart tries to get latest data at a specified interval.

<cfchart format="html" refresh="#{"type"="full","interval":"2","url":"feed.cfm"}#" chartWidth="800" chartHeight="600"/>

<!--- refresh.cfm --->

<cfchart format="html" refresh="#{"type"="full","interval":"2","url":"feed.cfm"}#" chartWidth="800" chartHeight="600"/>

values1=values2=values3=[];

for (i=1;i<=5;i++){

values1[i]=randRange(20,40);

}

for (i=1;i<=5;i++){

values2[i]=randRange(40,60);

}

for (i=1;i<=5;i++){

values3[i]=randRange(60,80);

}

</cfscript>

{

"graphset" : [

{

"type" : "bar",

"refresh" : {

"type" : "full",

"interval" : 2

"title" : {

"text" : "Full Refresh Chart"

"series" : [

{

"values" : <cfoutput>#serializeJSON(values1)#</cfoutput>

{

"values" : <cfoutput>#serializeJSON(values2)#</cfoutput>

{

"values" : <cfoutput>#serializeJSON(values3)#</cfoutput>

}]

}

<cfscript> values1=values2=values3=[]; for (i=1;i<=5;i++){ values1[i]=randRange(20,40); } for (i=1;i<=5;i++){ values2[i]=randRange(40,60); } for (i=1;i<=5;i++){ values3[i]=randRange(60,80); } </cfscript> { "graphset" : [ { "type" : "bar", "refresh" : { "type" : "full", "interval" : 2 }, "title" : { "text" : "Full Refresh Chart" }, "series" : [ { "values" : <cfoutput>#serializeJSON(values1)#</cfoutput> }, { "values" : <cfoutput>#serializeJSON(values2)#</cfoutput> }, { "values" : <cfoutput>#serializeJSON(values3)#</cfoutput> }] }] }

<!--- feed.cfm --->

<cfscript>
       values1=values2=values3=[];
       for (i=1;i<=5;i++){
             values1[i]=randRange(20,40);
       }
       for (i=1;i<=5;i++){
             values2[i]=randRange(40,60);
       }
       for (i=1;i<=5;i++){
             values3[i]=randRange(60,80);
       }
</cfscript>
{
  "graphset" : [
  {
    "type" : "bar",
    "refresh" : {
        "type" : "full",
        "interval" : 2
    },
       "title" : {
             "text" : "Full Refresh Chart"
       },
    "series" : [
     {
        "values" : <cfoutput>#serializeJSON(values1)#</cfoutput>
     },
     {
        "values" : <cfoutput>#serializeJSON(values2)#</cfoutput>
     },
     {
        "values" : <cfoutput>#serializeJSON(values3)#</cfoutput>
     }] 
  }]
}

Download

Get file

Click to view the output. This is an MP4 movie file.

Using the arrows attribute

arrows=[{"backgroundColor":"red","label":{"text":"Data for 2017","bold":true,"backgroundColor":"white"},

"size":6,"from":{"x":200,"y":100},"to":{"x":400,"y":200}}];

</cfscript>

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Chart with arrow" show3d="true"

arrows="#arrows#">

</cfchartseries>

</cfchart>

<cfscript> arrows=[{"backgroundColor":"red","label":{"text":"Data for 2017","bold":true,"backgroundColor":"white"}, "size":6,"from":{"x":200,"y":100},"to":{"x":400,"y":200}}]; </cfscript> <cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Chart with arrow" show3d="true" arrows="#arrows#"> <cfchartseries > <cfchartdata item="2015" value=20> <cfchartdata item="2016" value=40> <cfchartdata item="2017" value=60> </cfchartseries> </cfchart>

<cfscript>
       arrows=[{"backgroundColor":"red","label":{"text":"Data for 2017","bold":true,"backgroundColor":"white"},
       "size":6,"from":{"x":200,"y":100},"to":{"x":400,"y":200}}];
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Chart with arrow" show3d="true"
arrows="#arrows#">
       <cfchartseries >
             <cfchartdata item="2015" value=20>
             <cfchartdata item="2016" value=40>
             <cfchartdata item="2017" value=60>
       </cfchartseries>
</cfchart>

Output

Using the aspect3d attribute when true3d=false

aspect3d={"angle":90,"depth":100,"true3d":false};

</cfscript>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"

show3d="true">

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> aspect3d={"angle":90,"depth":100,"true3d":false}; </cfscript> <cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#" show3d="true"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>

<cfscript>
       aspect3d={"angle":90,"depth":100,"true3d":false};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"
show3d="true">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the aspect3d attribute when true3d=true

aspect3d={"angle":90,"depth":100,"true3d":true};

</cfscript>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"

show3d="true">

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> aspect3d={"angle":90,"depth":100,"true3d":true}; </cfscript> <cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#" show3d="true"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>

<cfscript>
       aspect3d={"angle":90,"depth":100,"true3d":true};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"
show3d="true">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the background attribute

background={};

background={"color":"red","color-2":"green"};

</cfscript>

<cfchart

format="html"

scalefrom="0"

scaleto="1200000"

showlegend="true"

chartheight="400"

chartwidth="600"

background="#background#" >

<cfchartseries

type="bar"

serieslabel="Website Traffic 2016"

seriescolor="blue">

</cfchartseries>

<cfchartseries

type="bar"

serieslabel="Website Traffic 2015"

seriescolor="yellow">

</cfchartseries>

</cfchart>

<cfscript> background={}; background={"color":"red","color-2":"green"}; </cfscript> <cfchart format="html" scalefrom="0" scaleto="1200000" showlegend="true" chartheight="400" chartwidth="600" background="#background#" > <cfchartseries type="bar" serieslabel="Website Traffic 2016" seriescolor="blue"> <cfchartdata item="January" value="503100"> <cfchartdata item="February" value="720310"> <cfchartdata item="March" value="688700"> <cfchartdata item="April" value="986500"> <cfchartdata item="May" value="1063911"> <cfchartdata item="June" value="1115321"> </cfchartseries> <cfchartseries type="bar" serieslabel="Website Traffic 2015" seriescolor="yellow"> <cfchartdata item="January" value="#RandRange(300000, 900000)#"> <cfchartdata item="February" value="#RandRange(300000, 900000)#"> <cfchartdata item="March" value="#RandRange(300000, 900000)#"> <cfchartdata item="April" value="#RandRange(300000, 900000)#"> <cfchartdata item="May" value="#RandRange(300000, 900000)#"> <cfchartdata item="June" value="#RandRange(300000, 900000)#"> </cfchartseries> </cfchart>

<cfscript>
       background={};
       background={"color":"red","color-2":"green"};
</cfscript>

<cfchart
   format="html"
   scalefrom="0"
   scaleto="1200000"
   showlegend="true"
   chartheight="400"
   chartwidth="600"
   background="#background#" >
  <cfchartseries
      type="bar"
      serieslabel="Website Traffic 2016"
      seriescolor="blue">
    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="720310">
    <cfchartdata item="March" value="688700">
    <cfchartdata item="April" value="986500">
    <cfchartdata item="May" value="1063911">
    <cfchartdata item="June" value="1115321">
   </cfchartseries>
  
  <cfchartseries
      type="bar"
      serieslabel="Website Traffic 2015"
      seriescolor="yellow">
    <cfchartdata item="January" value="#RandRange(300000, 900000)#">
    <cfchartdata item="February" value="#RandRange(300000, 900000)#">
    <cfchartdata item="March" value="#RandRange(300000, 900000)#">
    <cfchartdata item="April" value="#RandRange(300000, 900000)#">
    <cfchartdata item="May" value="#RandRange(300000, 900000)#">
    <cfchartdata item="June" value="#RandRange(300000, 900000)#">
  </cfchartseries>
</cfchart>

Output

Using the border attribute

border={"color":"blue","radius":6,"width":2};

</cfscript>

</cfchartseries>

</cfchart>

<cfscript> border={"color":"blue","radius":6,"width":2}; </cfscript> <cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" border="#border#"> <cfchartseries > <cfchartdata item="2015" value=20> <cfchartdata item="2016" value=40> <cfchartdata item="2017" value=60> </cfchartseries> </cfchart>

<cfscript>
       border={"color":"blue","radius":6,"width":2};
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" border="#border#">
       <cfchartseries >
             <cfchartdata item="2015" value=20>
             <cfchartdata item="2016" value=40>
             <cfchartdata item="2017" value=60>
       </cfchartseries>
</cfchart>

Output

Using the crosshair attribute

crosshair={"line-color":"green","line-style":"dashed","alpha"=1};

</cfscript>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> crosshair={"line-color":"green","line-style":"dashed","alpha"=1}; </cfscript> <cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" crosshair="#crosshair#"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>

<cfscript>
       crosshair={"line-color":"green","line-style":"dashed","alpha"=1};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" crosshair="#crosshair#">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the fill attribute

fill={"angle":45,"background-color-1":"gray","background-color-2":"yellow"};

</cfscript>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> fill={"angle":45,"background-color-1":"gray","background-color-2":"yellow"}; </cfscript> <cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" fill="#fill#"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>

<cfscript>
       fill={"angle":45,"background-color-1":"gray","background-color-2":"yellow"};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" fill="#fill#">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the labels attribute

labels=[{"text":"Sample comparison line chart","font-family":"Verdana","font-size":18}];

</cfscript>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> labels=[{"text":"Sample comparison line chart","font-family":"Verdana","font-size":18}]; </cfscript> <cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" labels="#labels#"> <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>

<cfscript>
       labels=[{"text":"Sample comparison line chart","font-family":"Verdana","font-size":18}];
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" labels="#labels#">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the legend attribute

legend={"background-color":"lightgray"};

</cfscript>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> legend={"background-color":"lightgray"}; </cfscript> <cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" legend="#legend#"> <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>

<cfscript>
       legend={"background-color":"lightgray"};
</cfscript>
<cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" legend="#legend#">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the plot attribute

plot={"rules":[

{

"rule":"%v<700000",

"background-color":"green" // set a rule that all values less than 700000

}, // are shown as green colored bars in the graph

{

"rule":"%v>700000", // set a rule that all values more than 700000

"background-color":"red" // are shown as green colored bars in the graph

}

]};

</cfscript>

<cfchart

format="html"

scalefrom="0"

scaleto="1200000"

showlegend="false"

chartheight="400"

chartwidth="600"

plot="#plot#"

title="Website Traffic 2016">

</cfchartseries>

</cfchart>

<cfscript> plot={"rules":[ { "rule":"%v<700000", "background-color":"green" // set a rule that all values less than 700000 }, // are shown as green colored bars in the graph { "rule":"%v>700000", // set a rule that all values more than 700000 "background-color":"red" // are shown as green colored bars in the graph } ]}; </cfscript> <cfchart format="html" scalefrom="0" scaleto="1200000" showlegend="false" chartheight="400" chartwidth="600" plot="#plot#" title="Website Traffic 2016"> <cfchartseries type="bar"> <cfchartdata item="January" value="503100"> <cfchartdata item="February" value="620310"> <cfchartdata item="March" value="688700"> <cfchartdata item="April" value="986500"> <cfchartdata item="May" value="1063911"> <cfchartdata item="June" value="1115321"> </cfchartseries> </cfchart>

<cfscript>
       plot={"rules":[           
             {
             "rule":"%v<700000",
             "background-color":"green" // set a rule that all values less than 700000
             },                            // are shown as green colored bars in the graph
             {
             "rule":"%v>700000",   // set a rule that all values more than 700000
             "background-color":"red"   // are shown as green colored bars in the graph
             }
       ]};
</cfscript>

<cfchart
   format="html"
   scalefrom="0"
   scaleto="1200000"
   showlegend="false"
   chartheight="400"
   chartwidth="600"
   plot="#plot#" 
   title="Website Traffic 2016">
  <cfchartseries type="bar">
    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="620310">
    <cfchartdata item="March" value="688700">
    <cfchartdata item="April" value="986500">
    <cfchartdata item="May" value="1063911">
    <cfchartdata item="June" value="1115321">
   </cfchartseries>
</cfchart>

Output

Using the preview attribute

n=200;

preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"3"}; //preview struct

myarray=[];

for (i=1;i<=n;i++){

myarray[i]=randrange(1,n);

}

strengtharray=[];

for (i=1;i<=n;i++){

strengtharray[i]=randrange(15,25);

}

myquery=QueryNew("points,data,strength","integer,integer,integer");

for (i=1;i<=arraylen(myarray);i++){

queryAddRow(myquery);

querySetCell(myquery,"points",myarray[i]);

querySetCell(myquery,"data",i);

querySetCell(myquery,"strength",strengtharray[i]);

}

cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="400",chartwidth="600",

preview="#preview#") {

cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,

zcolumn="strength");

}

</cfscript>

<cfscript> n=200; preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"3"}; //preview struct myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew("points,data,strength","integer,integer,integer"); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,"points",myarray[i]); querySetCell(myquery,"data",i); querySetCell(myquery,"strength",strengtharray[i]); } cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="400",chartwidth="600", preview="#preview#") { cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" , zcolumn="strength"); } </cfscript>

<cfscript>
       n=200;
       preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"3"}; //preview struct
       
       myarray=[];
       for (i=1;i<=n;i++){
             myarray[i]=randrange(1,n);
       }
       strengtharray=[];
       for (i=1;i<=n;i++){
             strengtharray[i]=randrange(15,25);
       }
       myquery=QueryNew("points,data,strength","integer,integer,integer");
       for (i=1;i<=arraylen(myarray);i++){
             queryAddRow(myquery);
             querySetCell(myquery,"points",myarray[i]);
             querySetCell(myquery,"data",i);
             querySetCell(myquery,"strength",strengtharray[i]);
       }
       
       cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="400",chartwidth="600",
       preview="#preview#") {
             cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
             zcolumn="strength");
       }
</cfscript>

Output

Using the seriesPlacement attribute

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" seriesPlacement="stacked">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the scales attribute

Example 1

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart" scales="x,y">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red" scales="x2,y2">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Example 2

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart" scales="x,y">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" scales="x2,y2">
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

Output

Using the xAxis attribute

n=200;

preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct

xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};

myarray=[];

for (i=1;i<=n;i++){

myarray[i]=randrange(1,n);

}

strengtharray=[];

for (i=1;i<=n;i++){

strengtharray[i]=randrange(15,25);

}

myquery=QueryNew("points,data,strength","integer,integer,integer");

for (i=1;i<=arraylen(myarray);i++){

queryAddRow(myquery);

querySetCell(myquery,"points",myarray[i]);

querySetCell(myquery,"data",i);

querySetCell(myquery,"strength",strengtharray[i]);

}

cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",

preview="#preview#",xaxis="#xaxis#") {

cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,

zcolumn="strength");

}

</cfscript>

<cfscript> n=200; preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true}; myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew("points,data,strength","integer,integer,integer"); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,"points",myarray[i]); querySetCell(myquery,"data",i); querySetCell(myquery,"strength",strengtharray[i]); } cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800", preview="#preview#",xaxis="#xaxis#") { cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" , zcolumn="strength"); } </cfscript>

<cfscript>
       n=200;
       preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct
       xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};
       myarray=[];
       for (i=1;i<=n;i++){
             myarray[i]=randrange(1,n);
       }
       strengtharray=[];
       for (i=1;i<=n;i++){
             strengtharray[i]=randrange(15,25);
       }
       myquery=QueryNew("points,data,strength","integer,integer,integer");
       for (i=1;i<=arraylen(myarray);i++){
             queryAddRow(myquery);
             querySetCell(myquery,"points",myarray[i]);
             querySetCell(myquery,"data",i);
             querySetCell(myquery,"strength",strengtharray[i]);
       }
       
       cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",
       preview="#preview#",xaxis="#xaxis#") {
             cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
             zcolumn="strength");
       }
</cfscript>

Using the zoom attribute

n=200;

preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct

xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};

zoom={"alpha":"0.3","border-color":"black","border-width":4,"background-color":"gray","label":{"border-color":"red","border-width":2,"font-size":10}};

myarray=[];

for (i=1;i<=n;i++){

myarray[i]=randrange(1,n);

}

strengtharray=[];

for (i=1;i<=n;i++){

strengtharray[i]=randrange(15,25);

}

myquery=QueryNew("points,data,strength","integer,integer,integer");

for (i=1;i<=arraylen(myarray);i++){

queryAddRow(myquery);

querySetCell(myquery,"points",myarray[i]);

querySetCell(myquery,"data",i);

querySetCell(myquery,"strength",strengtharray[i]);

}

cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",

preview="#preview#",xaxis="#xaxis#",zoom="#zoom#") {

cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,

zcolumn="strength");

}

</cfscript>

<cfscript> n=200; preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true}; zoom={"alpha":"0.3","border-color":"black","border-width":4,"background-color":"gray","label":{"border-color":"red","border-width":2,"font-size":10}}; myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew("points,data,strength","integer,integer,integer"); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,"points",myarray[i]); querySetCell(myquery,"data",i); querySetCell(myquery,"strength",strengtharray[i]); } cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800", preview="#preview#",xaxis="#xaxis#",zoom="#zoom#") { cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" , zcolumn="strength"); } </cfscript>

<cfscript>
       n=200;
       preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct
       xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};
       zoom={"alpha":"0.3","border-color":"black","border-width":4,"background-color":"gray","label":{"border-color":"red","border-width":2,"font-size":10}};
       myarray=[];
       for (i=1;i<=n;i++){
             myarray[i]=randrange(1,n);
       }
       strengtharray=[];
       for (i=1;i<=n;i++){
             strengtharray[i]=randrange(15,25);
       }
       myquery=QueryNew("points,data,strength","integer,integer,integer");
       for (i=1;i<=arraylen(myarray);i++){
             queryAddRow(myquery);
             querySetCell(myquery,"points",myarray[i]);
             querySetCell(myquery,"data",i);
             querySetCell(myquery,"strength",strengtharray[i]);
       }
       
       cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",
       preview="#preview#",xaxis="#xaxis#",zoom="#zoom#") {
             cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
             zcolumn="strength");
       }
</cfscript>

Using height, width, and percentage

Example 1- height=600 and width=600

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="bar" title="Sample two-series Line chart" height=600 width=800 plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
        <cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
            <cfchartdata item="Day 1" value="19.2"/>
            <cfchartdata item="Day 2" value="15.2"/>
        </cfchartseries>
        <cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
            <cfchartdata item="Day 1" value="39.2"/>
            <cfchartdata item="Day 2" value="35.2"/>
        </cfchartseries>
</cfchart>

Example 2- height=50% and width=50%

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="bar" title="Sample two-series Line chart" height=50% width=50% plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
        <cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
            <cfchartdata item="Day 1" value="19.2"/>
            <cfchartdata item="Day 2" value="15.2"/>
        </cfchartseries>
        <cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
            <cfchartdata item="Day 1" value="39.2"/>
            <cfchartdata item="Day 2" value="35.2"/>
        </cfchartseries>
</cfchart>

Example 3- Example 3- x=0 y=35%

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="bar" title="Sample two-series Line chart" x=0 y=35% plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
        <cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
            <cfchartdata item="Day 1" value="19.2"/>
            <cfchartdata item="Day 2" value="15.2"/>
        </cfchartseries>
        <cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
            <cfchartdata item="Day 1" value="39.2"/>
            <cfchartdata item="Day 2" value="35.2"/>
        </cfchartseries>
</cfchart>

Using the bevel attribute

Bevel in charts is a 3D-like raised effect applied to chart elements such as bars and pie slices to enhance visual depth. This effect gives the elements an embossed-like look, making them stand out more prominently.

Bevel is 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.

SELECT * FROM EMPLOYEE ORDER BY SALARY DESC

FETCH FIRST 10 ROWS ONLY

</cfquery>

bevel={

"blur-x"=5,

"blur-y"=6,

"angle"=45,

"distance"=5

}

scaley={"min-value"="0","max-value"="15000"}

</cfscript>

</cfchart>

<cfquery name="empQuery" datasource="cfdocexamples"> SELECT * FROM EMPLOYEE ORDER BY SALARY DESC FETCH FIRST 10 ROWS ONLY </cfquery> <cfscript> bevel={ "blur-x"=5, "blur-y"=6, "angle"=45, "distance"=5 } scaley={"min-value"="0","max-value"="15000"} </cfscript> <cfchart format="html" type="hbar" query="empQuery" height="600" width="800" showLegend="FALSE" xaxis="#scaley#" title="Employee salary" xaxistitle="Lastname" yaxistitle="Salary"> <cfchartseries itemcolumn="LASTNAME" valuecolumn="SALARY" bevel="#bevel#" color="green"> </cfchart>

<cfquery name="empQuery" datasource="cfdocexamples">
    SELECT * FROM EMPLOYEE ORDER BY SALARY DESC
    FETCH FIRST 10 ROWS ONLY
</cfquery>

<cfscript>
    bevel={
        "blur-x"=5,
        "blur-y"=6,
        "angle"=45,
        "distance"=5
    }
    scaley={"min-value"="0","max-value"="15000"}
</cfscript>

<cfchart  format="html" type="hbar"  query="empQuery"  height="600" width="800" showLegend="FALSE"  xaxis="#scaley#" title="Employee salary" xaxistitle="Lastname" yaxistitle="Salary">
    <cfchartseries  itemcolumn="LASTNAME" valuecolumn="SALARY"  bevel="#bevel#" color="green"> 
</cfchart>

Using the axis attribute

Enhance the readability and presentation of charts by customizing the x-axis and y-axis attributes. This customization is achieved using the xAxis and yAxis attributes within the cfchart tag.

The xAxis and yAxis attributes accept JSON-formatted strings that define various styling options for the respective axes. These options include formatting, labeling, guiding lines, and zooming capabilities.

xAxis={"label"={"text":"Monthly temperature in Chartville","color"="##3a5551"}}

</cfscript>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchart>

</cfchartset>

<cfscript> xAxis={"label"={"text":"Monthly temperature in Chartville","color"="##3a5551"}} </cfscript> <cfchartset format="html" layout="vertical" height="800" width="1000"> <cfchart format = "html" type = "curve" markersize="5" xAxis="#xAxis#"> <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white" color="##3a5551"> <cfchartdata item="Jan" value="5"> <cfchartdata item="Feb" value="70"> <cfchartdata item="Mar" value="10"> <cfchartdata item="Apr" value="40"> <cfchartdata item="May" value="18"> <cfchartdata item="Jun" value="22"> </cfchartseries> </cfchart> <cfchart format = "html" type = "bar" xAxis="#xAxis#"> <cfchartseries label="Temperature(°C) - Monthly" seriescolor="##3a5551"> <cfchartdata item="Jan" value="5"> <cfchartdata item="Feb" value="7"> <cfchartdata item="Mar" value="10"> <cfchartdata item="Apr" value="14"> <cfchartdata item="May" value="18"> <cfchartdata item="Jun" value="22"> </cfchartseries> </cfchart> </cfchartset>

<cfscript>
    xAxis={"label"={"text":"Monthly temperature in Chartville","color"="##3a5551"}}
</cfscript>

<cfchartset format="html" layout="vertical" height="800" width="1000">
    <cfchart format = "html" type = "curve" markersize="5" xAxis="#xAxis#">
        <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white" color="##3a5551">
                <cfchartdata item="Jan" value="5">
                <cfchartdata item="Feb" value="70">
                <cfchartdata item="Mar" value="10">
                <cfchartdata item="Apr" value="40">
                <cfchartdata item="May" value="18">
                <cfchartdata item="Jun" value="22">
        </cfchartseries>
    </cfchart>

    <cfchart format = "html" type = "bar" xAxis="#xAxis#">
    <cfchartseries  label="Temperature(°C) - Monthly" seriescolor="##3a5551">
            <cfchartdata item="Jan" value="5">
            <cfchartdata item="Feb" value="7">
            <cfchartdata item="Mar" value="10">
            <cfchartdata item="Apr" value="14">
            <cfchartdata item="May" value="18">
            <cfchartdata item="Jun" value="22">
        </cfchartseries>
    </cfchart>
</cfchartset>

Get help faster and easier

New user?

Customize a ColdFusion chart using cfchart

Customize chart appearance

Set chart dimensions

Chart format

Enable 3D effects

Customize chart colors

Background and border colors

Customize series colors

Customize labels and titles

Chart title

Customize data representation

Using <cfchartseries> to define data

Multiple series for comparative data

Dynamically poopulating data from a query

Customizing chart legends and tooltips

Enabling and styling legends

Use tooltips for data points

Customize axes and gridlines

Adjust axis scale

Display and hide gridlines

Create a dynamic refresh chart

Using the arrows attribute

Output

Using the aspect3d attribute when true3d=false

Using the aspect3d attribute when true3d=true

Using the background attribute

Using the border attribute

Using the crosshair attribute

Using the fill attribute

Using the labels attribute

Using the legend attribute

Using the plot attribute

Using the preview attribute

Using the seriesPlacement attribute

Using the scales attribute

Using the xAxis attribute

Using the zoom attribute

Using height, width, and percentage

Using the bevel attribute

Using the axis attribute

Get help faster and easier

Share this page