Whatever message this page gives is out now! Go check it out!

Apply and create themes in ColdFusion

Last update:
May 18, 2026

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
code
<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
text
Example 2- vernal_light theme
code
<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
text

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.
code
<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
text
Change the theme to blue_light and you get the following output:
text

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.
code
<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
text

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",
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 
}
Change the properties, as shown below:
"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
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
}
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"
            }
        }
    }
To apply the data label styling, change the fontColor and fontSize properties.
"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:
<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>

Share this page

Was this page helpful?
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Thank you for your feedback. Your response will help improve this page.

On this page