Apply and create themes in ColdFusion

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

Overview

Themes enhance the visual appeal and consistency of ColdFusion charts. Themes allow developers to maintain a uniform look and feel across multiple charts by defining styling properties. By applying themes, you can customize elements such as colors, fonts, and other chart elements to align with your organization’s design language and guidelines.

ColdFusion supports categorical, sequential, and diverging colors across themes.

Creating themes allows you to design unique chart styles tailored to specific use cases or audiences. With ColdFusion, you can create custom themes for creating charts that are both visually engaging and informative.

Additionally, you can modify the themes to update your charts on-the-fly without significant redevelopment effort.

ColdFusion themes

In ColdFusion, themes control the non-data components of a chart, such as text, backgrounds, gridlines, and other visual elements.

Location of ColdFusion themes

The themes are in CF_HOME/cfusion/charting/themes.

Key elements of a theme

A theme includes settings for visual styling, palettes, and specific chart types such as pie, line, radar, and area charts.

Note:

In graph properties, the properties subtitle, source, and nodata are not supported at present in charting. Some of them are present in the theme file because they might be introduced in future.

The graph customization properties cover background colors, text configurations for titles, subtitles, and sources, as well as styling for graphs without data. Scales manage axis styling, including guides, ticks, and labels, with optional refinements for minor guides and ticks.

Scrollbars are defined for both horizontal and vertical orientations, specifying bar and handle sizes. The legend section adjusts layout, margins, and appearance, including styling for markers, headers, and footers.

The chart settings control data point representation and interactions, with dynamic adjustments for chart area margins. Various chart types like Pie, Bubble, Bar, Line, and Area have specific configurations, including border and value box settings, tooltip customization, and legend and scale management.

Note: The properties are not exhaustive.

Use ColdFusion built-in themes

ColdFusion provides the following built-in themes:

blue_dark
cosmos_dark
dawn_dark
feast_dark
industrial_dark
retro_dark
spectrum_dark
vernal_dark

blue_light
cosmos_light
dawn_light
feast_light
industrial_light
retro_light
spectrum_light
vernal_light

Apply a theme to a Chart

In this scenario, you’ll apply a theme, vernal_dark, out of the box, to a chart. In the cfchart tag, the attribute "theme" allows you to specify any of the 16 built-in themes to style your chart.

Example 1- vernal_dark theme

<cfchart type="bar" title="Monetary reserves (2024)" showlegend=FALSE theme="vernal_dark"

width="600" height="400" format="html">

</cfchartseries>

</cfchart>

<cfchart type="bar" title="Monetary reserves (2024)" showlegend=FALSE theme="vernal_dark" 
width="600" height="400" format="html"> 
    <cfchartseries color="green"> 
    <cfchartdata item="India" value=10> 
    <cfchartdata item="USA" value=20> 
    <cfchartdata item="France" value=30> 
    <cfchartdata item="Australia" value=20> 
    <cfchartdata item="Japan" value=40> 
    </cfchartseries> 
</cfchart>

Output

Example 2- vernal_light theme

<cfchart type="bar" title="Monetary reserves (2024)" showlegend=FALSE theme="vernal_light"

width="600" height="400" format="html">

</cfchartseries>

</cfchart>

<cfchart type="bar" title="Monetary reserves (2024)" showlegend=FALSE theme="vernal_light" 
width="600" height="400" format="html"> 
    <cfchartseries color="green"> 
    <cfchartdata item="India" value=10> 
    <cfchartdata item="USA" value=20> 
    <cfchartdata item="France" value=30> 
    <cfchartdata item="Australia" value=20> 
    <cfchartdata item="Japan" value=40> 
    </cfchartseries> 
</cfchart>

Output

Apply themes to multiple Charts

In this scenario, using the cfchartset tag, you will do the following:

Apply a theme to multiple charts.
Apply multiple themes to multiple charts.

Apply a theme to multiple charts

Specify a theme in the "theme" attribute in cfchartset. This will apply the specified theme to all the charts defined in the tag.

In this scenario, you’ll create four charts in a 2x2 layout and apply the blue_dark theme to the charts.

legend={"vertical-align":"middle","layout"="3x1","align"="right"};

</cfscript>

<cfchart type="line" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (line chart)"

legend="#legend#" theme="blue_dark">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="area" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (area chart)"

legend="#legend#" theme="blue_light">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="bar" seriesplacement="stacked" title="Air quality daily monitoring (stacked bar chart)"

legend="#legend#" theme="vernal_light">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="radar" seriesplacement="stacked" title="Air quality daily monitoring (radar chart)"

legend="#legend#" theme="vernal_dark">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartset>

<cfscript> legend={"vertical-align":"middle","layout"="3x1","align"="right"}; </cfscript> <cfchartset format="html" height="600" width="800" layout="2x2"> <cfchart type="line" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (line chart)" legend="#legend#" theme="blue_dark"> <cfchartseries serieslabel="Ambient"> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries serieslabel="Indoor"> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries serieslabel="Stack emission"> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> <cfchart type="area" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (area chart)" legend="#legend#" theme="blue_light"> <cfchartseries serieslabel="Ambient"> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries serieslabel="Indoor"> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries serieslabel="Stack emission"> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> <cfchart type="bar" seriesplacement="stacked" title="Air quality daily monitoring (stacked bar chart)" legend="#legend#" theme="vernal_light"> <cfchartseries> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> <cfchart type="radar" seriesplacement="stacked" title="Air quality daily monitoring (radar chart)" legend="#legend#" theme="vernal_dark"> <cfchartseries> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> </cfchartset>

<cfscript>
      legend={"vertical-align":"middle","layout"="3x1","align"="right"};
</cfscript>
<cfchartset format="html" height="600" width="800" layout="2x2">
    <cfchart type="line" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (line chart)"
    legend="#legend#" theme="blue_dark">
        <cfchartseries serieslabel="Ambient">
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries serieslabel="Indoor"> 
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries serieslabel="Stack emission">
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
    <cfchart type="area" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (area chart)"
     legend="#legend#" theme="blue_light">
       <cfchartseries serieslabel="Ambient">
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries serieslabel="Indoor">
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries serieslabel="Stack emission">
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
    <cfchart type="bar" seriesplacement="stacked" title="Air quality daily monitoring (stacked bar chart)"
    legend="#legend#" theme="vernal_light">
       <cfchartseries>
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
    <cfchart type="radar" seriesplacement="stacked" title="Air quality daily monitoring (radar chart)"
    legend="#legend#" theme="vernal_dark">
       <cfchartseries>
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
</cfchartset>

Output

Change the theme to blue_light and you get the following output:

Apply multiple themes to multiple charts

Instead of applying the same theme to multiple charts, the cfchart tag allows you to add different themes to each chart. This means, as many number of charts, as many themes are applied to the charts. The charts appear as a stack.

legend={"vertical-align":"middle","layout"="3x1","align"="right"};

</cfscript>

<cfchart type="line" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (line chart)"

legend="#legend#" theme="blue_dark" format="html" width="600" height="400">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="area" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (area chart)"

legend="#legend#" theme="cosmos_light" format="html" width="600" height="400">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="bar" seriesplacement="stacked" title="Air quality daily monitoring (stacked bar chart)"

legend="#legend#" theme="vernal_light" format="html" width="600" height="400">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfchart type="radar" seriesplacement="stacked" title="Air quality daily monitoring (radar chart)"

legend="#legend#" theme="vernal_dark" format="html" width="600" height="400">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> legend={"vertical-align":"middle","layout"="3x1","align"="right"}; </cfscript> <cfchart type="line" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (line chart)" legend="#legend#" theme="blue_dark" format="html" width="600" height="400"> <cfchartseries serieslabel="Ambient"> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries serieslabel="Indoor"> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries serieslabel="Stack emission"> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> <cfchart type="area" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (area chart)" legend="#legend#" theme="cosmos_light" format="html" width="600" height="400"> <cfchartseries serieslabel="Ambient"> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries serieslabel="Indoor"> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries serieslabel="Stack emission"> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> <cfchart type="bar" seriesplacement="stacked" title="Air quality daily monitoring (stacked bar chart)" legend="#legend#" theme="vernal_light" format="html" width="600" height="400"> <cfchartseries> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart> <cfchart type="radar" seriesplacement="stacked" title="Air quality daily monitoring (radar chart)" legend="#legend#" theme="vernal_dark" format="html" width="600" height="400"> <cfchartseries> <cfchartdata item="Day 1" value="1"/> <cfchartdata item="Day 2" value="2"/> <cfchartdata item="Day 3" value="3"/> <cfchartdata item="Day 4" value="4"/> <cfchartdata item="Day 5" value="5"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="4"/> <cfchartdata item="Day 2" value="5"/> <cfchartdata item="Day 3" value="1"/> <cfchartdata item="Day 4" value="2"/> <cfchartdata item="Day 5" value="3"/> </cfchartseries> <cfchartseries> <cfchartdata item="Day 1" value="2"/> <cfchartdata item="Day 2" value="3"/> <cfchartdata item="Day 3" value="4"/> <cfchartdata item="Day 4" value="5"/> <cfchartdata item="Day 5" value="1"/> </cfchartseries> </cfchart>

<cfscript>
      legend={"vertical-align":"middle","layout"="3x1","align"="right"};
</cfscript>
    <cfchart type="line" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (line chart)"
    legend="#legend#" theme="blue_dark" format="html" width="600" height="400">
        <cfchartseries serieslabel="Ambient">
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries serieslabel="Indoor">
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries serieslabel="Stack emission">
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
    <cfchart type="area" seriesplacement="stacked" showlegend=TRUE title="Air quality daily monitoring (area chart)"
     legend="#legend#" theme="cosmos_light" format="html" width="600" height="400">
       <cfchartseries serieslabel="Ambient">
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries serieslabel="Indoor">
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries serieslabel="Stack emission">
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
    <cfchart type="bar" seriesplacement="stacked" title="Air quality daily monitoring (stacked bar chart)"
    legend="#legend#" theme="vernal_light" format="html" width="600" height="400">
       <cfchartseries>
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>
    <cfchart type="radar" seriesplacement="stacked" title="Air quality daily monitoring (radar chart)"
    legend="#legend#" theme="vernal_dark" format="html" width="600" height="400">
       <cfchartseries>
             <cfchartdata item="Day 1" value="1"/>
             <cfchartdata item="Day 2" value="2"/>
             <cfchartdata item="Day 3" value="3"/>
             <cfchartdata item="Day 4" value="4"/>
             <cfchartdata item="Day 5" value="5"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="4"/>
             <cfchartdata item="Day 2" value="5"/>
             <cfchartdata item="Day 3" value="1"/>
             <cfchartdata item="Day 4" value="2"/>
             <cfchartdata item="Day 5" value="3"/>
       </cfchartseries>
       <cfchartseries>
             <cfchartdata item="Day 1" value="2"/>
             <cfchartdata item="Day 2" value="3"/>
             <cfchartdata item="Day 3" value="4"/>
             <cfchartdata item="Day 4" value="5"/>
             <cfchartdata item="Day 5" value="1"/>
       </cfchartseries>
    </cfchart>

Output-partial

Create a custom theme

Creating a custom theme in ColdFusion involves defining a theme object with custom properties for chart appearance and applying it globally or to specific charts.

Understand ColdFusion themes

A theme in ColdFusion is a JSON object that specifies styles for chart elements like titles, legends, axis lines, and series. Themes allow you to maintain a consistent look across multiple charts.

Create a custom theme object

Apart from using a built-in theme, you can create your own theme.

In this example, you’ll use the theme, vernal_light, and based on it, you’ll create your own theme.

Open the theme in any code editor and save the theme as my_custom_theme.json or any other name. Then you’ll add the custom theme to a cfchart chart and gradually make incremental changes to the theme.

Note: If using .txt file, the contents must be a valid json. If the file theme_name doesn't have an extension, the file will still be valid, provided it's in an acceptable json format.

Naming a custom theme

The name of the theme in the theme attribute should be exactly the same as the name of the file located in the directory, for example, if the file name of the theme in directory is 'theme_name.json', then the extension will have to be mentioned in the value of the attribute like theme="theme_name.json", if the file name has no extension, eg. 'theme_name', then the value need to be theme="theme_name".

Location of the custom theme

You can place custom themes in the following locations:

In the same location as the cfm file.
In CFHOME/cfusion/charting/themes folder.
In any location on your computer. However, the absolute or relative path needs to be specified in application.cfc. For example, this.chartThemeDirectory = ExpandPath("..\custom_theme_folder\theme_file").

After creating a custom theme file, specify the full name of the file, for example, theme_name.json, in either of the three location mentioned above. In contrary, if you are specifiying a built-in theme, you can use the theme, for example, vernal_light, without any extension.

Change Chart background

Change the background color of the chart by changing the hex code in the property "background-color" in "graph" in the file my_custom_theme.json.

"graph": {

"background-color": "#95cceb",

"graph": { "background-color": "#95cceb",

"graph": { 
    "background-color": "#95cceb",

The following output appears:

Change Chart title properties

Next, you’ll modify the font size, color, padding at the top and bottom of the title, and background color of the chart title. The properties are present in:

"title": {

"font-size": 14,

"bold": 1,

"color": "#fff",

"background-color": "",

"padding": 6,

"adjustLayout": true

}

"title": { "font-size": 14, "bold": 1, "color": "#fff", "background-color": "", "padding": 6, "adjustLayout": true }

"title": { 
            "font-size": 14, 
            "bold": 1, 
            "color": "#fff", 
            "background-color": "", 
            "padding": 6, 
            "adjustLayout": true 
}

Change the properties, as shown below:

"title": {

"font-size": 24,

"bold": 1,

"color": "##cc6475",

"background-color": "#d8e0f4",

"padding": 16,

"adjustLayout": true

}

"title": { "font-size": 24, "bold": 1, "color": "##cc6475", "background-color": "#d8e0f4", "padding": 16, "adjustLayout": true }

"title": {
            "font-size": 24,
            "bold": 1,
            "color": "##cc6475",
            "background-color": "#d8e0f4",
            "padding": 16,
            "adjustLayout": true
        }

The change produces the following output:

Toggle visibility of guides

Make the chart guides invisible. Use the property, "visible": 1 or 0 to toggle the guide’s visibility.

"guide": {

"visible": 0

"guide": { "visible": 0

"guide": { 
            "visible": 0

After you set "visible": 0, the guides no longer display.

Similarly, toggle the visibility again and modify other properties, such as guide width, style, color, or transparency.

"guide": {

"visible": 1,

"line-width": 2,

"line-style": "dotted",

"line-color": "#0d083a",

"alpha": 0.8

}

"guide": { "visible": 1, "line-width": 2, "line-style": "dotted", "line-color": "#0d083a", "alpha": 0.8 }

"guide": {
                "visible": 1,
                "line-width": 2,
                "line-style": "dotted",
                "line-color": "#0d083a",
                "alpha": 0.8
}

Which produces the following output:

Change x-axis and y-axis data labels

Since the properties are chart-specific, navigate to the vbar object in the theme file. In the vbar object, the scaleX and scaleY properties allow you to style the data labels in the chart.

"vbar": {

"scaleX": {

"guide": {

"visible": false

"item": {

"fontColor": "#ec397a",

"fontSize": "15px"

}

"scaleY": {

"item": {

"fontColor": "#ec397a",

"fontSize": "15px"

}

"vbar": { "scaleX": { "guide": { "visible": false }, "item": { "fontColor": "#ec397a", "fontSize": "15px" } }, "scaleY": { "item": { "fontColor": "#ec397a", "fontSize": "15px" } } }

"vbar": {
        "scaleX": {
            "guide": {
                "visible": false
            },
            "item": {
                "fontColor": "#ec397a",
                "fontSize": "15px"
            }
        },
        "scaleY": {
            "item": {
                "fontColor": "#ec397a",
                "fontSize": "15px"
            }
        }
    }

To apply the data label styling, change the fontColor and fontSize properties.

"fontColor": "#ec397a",

"fontSize": "15px"

"fontColor": "#ec397a", "fontSize": "15px"

"fontColor": "#ec397a",
"fontSize": "15px"

The following chart displays:

After adding the customizations to the theme json file, add the name of the file to the theme attribute, as shown below:

yAxis={"label"={"text":"Reserves($)","color":"##d249c4","fontSize": '24px'}}

</cfscript>

<cfchart type="bar" title="Monetary reserves (2025)" showlegend=FALSE theme="my_custom_theme.json"

width="600" height="400" format="html">

</cfchartseries>

</cfchart>

<cfscript> yAxis={"label"={"text":"Reserves($)","color":"##d249c4","fontSize": '24px'}} </cfscript> <cfchart type="bar" title="Monetary reserves (2025)" showlegend=FALSE theme="my_custom_theme.json" width="600" height="400" format="html"> <cfchartseries color="##0f689a" animate="#animation#"> <cfchartdata item="India" value=10> <cfchartdata item="USA" value=20> <cfchartdata item="France" value=30> <cfchartdata item="Australia" value=20> <cfchartdata item="Japan" value=40> </cfchartseries> </cfchart>

<cfscript>
    yAxis={"label"={"text":"Reserves($)","color":"##d249c4","fontSize": '24px'}}
</cfscript>
<cfchart type="bar" title="Monetary reserves (2025)" showlegend=FALSE theme="my_custom_theme.json"
 width="600" height="400"  format="html">
    <cfchartseries color="##0f689a" animate="#animation#">
        <cfchartdata item="India" value=10>
        <cfchartdata item="USA" value=20>
        <cfchartdata item="France" value=30>
        <cfchartdata item="Australia" value=20>
        <cfchartdata item="Japan" value=40>
    </cfchartseries>
</cfchart>

Get help faster and easier

New user?

Apply and create themes in ColdFusion

Overview

ColdFusion themes

Location of ColdFusion themes

Key elements of a theme

Use ColdFusion built-in themes

Apply a theme to a Chart

Apply themes to multiple Charts

Apply a theme to multiple charts

Apply multiple themes to multiple charts

Create a custom theme

Understand ColdFusion themes

Create a custom theme object

Change Chart background

Change Chart title properties

Toggle visibility of guides

Change x-axis and y-axis data labels

Get help faster and easier

Share this page

Ask the Community

Contact Us