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

Charting rules in ColdFusion

Last update:
May 18, 2026

Understanding charting rules in ColdFusion

Use rules to modify the appearance of chart elements based on logical conditions. Apply rules to various components within a chart, allowing responsive and conditional styling.

How charting rules work in ColdFusion

In a chart series configuration, rules define conditions to apply a specific style. The rule property is a string that specifies the condition, such as value ranges or equality. You can use %v to represent the data point's value, %x for the x-axis value, or %data-id to identify specific data points.
For example, apply rules to modify the color of bars in a bar chart based on their values, style bubbles in a bubble chart according to size or position, or highlight specific data points based on conditions.
Note: You can apply rules to both cfchart and cfchartseries for rules to single or multiple charts.

Different types of operators in ColdFusion charting rules

  1. Logical Operators:
    • || (OR)
    • && (AND)
    • != (NOT EQUAL TO)
  2. Comparison Operators:
    • == (EQUAL TO)
    • > (GREATER THAN)
    • < (LESS THAN)
    • >= (GREATER THAN OR EQUAL TO)
    • <= (LESS THAN OR EQUAL TO)
  3. Arithmetic Operators:
    • +, -, *, /, %

Syntax for implementing charting rules in ColdFusion

A rules array is typically added inside a plot object in the chart configuration.
Inside the "rules" container, you can open a rule set. You can include as many rule sets within the container as you would like. Then, add your "rule" attribute along with the criteria you want to check for. For example, the following rule checks if the plot value is greater than 50 using the %v token.
View the list of applicable rules in Token reference table .
For example,
plot={ 
    "rules"=[ 
        { 
            "rule":"%v<2000", 
            "background-color":"gray" 
        } 
    ] 
}
The common properties used in rules are:
  • rule: The condition that needs to be met (e.g., %v > 50).
  • backgroundColor: Sets the background color of the data point when the rule is met.
  • borderColor,borderWidth: Define the color and width of the data point border.
  • lineStyle: Defines the line style for the element (e.g., dotted, dashed).
  • marker: For specific markers in line charts, you can apply different styles.
Let’s see rules in action.
Example 1
In this example, you’ll create a bar chart that will highlight only those bars in gray that have values less than 20.
code
<cfscript>
    plot={
        "rules"=[
            {
                "rule":"%v<20",
                "background-color":"gray"
            }
        ]
    }
</cfscript>
<cfchart format = "html" type = "bar" plot="#plot#"
      chartheight="500" chartwidth="900" showLegend=FALSE
       title="Monthly Average Temperatures (°C) from Jan to Dec">
   <cfchartseries>
        <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">
        <cfchartdata item="Jul" value="25">
        <cfchartdata item="Aug" value="24">
        <cfchartdata item="Sep" value="20">
        <cfchartdata item="Oct" value="15">
        <cfchartdata item="Nov" value="10">
        <cfchartdata item="Dec" value="6">
    </cfchartseries>
</cfchart>
Output
Figure: Bar chart that highlights only those bars in gray that have values less than 20.
Bar chart that highlights only those bars in gray that have values less than 20.
Example 2
In this example, you’ll expand rules to add bar border color and width. Also, you’ll add border color and width to bars that have values greater than or equal to 20.
code
<cfscript>
    plot={
        "rules"=[
            {
                "rule":"%v<20",
                "background-color":"gray",
                "border-color":"red",
                "border-width": "2px"
            },
            {
                "rule":"%v>=20",
                "background-color":"gray",
                "border-color":"green",
                "border-width": "2px"
            }
        ]
    }
</cfscript>
<cfchart format = "html" type = "bar" plot="#plot#"
      chartheight="500" chartwidth="900" showLegend=FALSE
       title="Monthly Average Temperatures (°C) from Jan to Dec">
   <cfchartseries>
        <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">
        <cfchartdata item="Jul" value="25">
        <cfchartdata item="Aug" value="24">
        <cfchartdata item="Sep" value="20">
        <cfchartdata item="Oct" value="15">
        <cfchartdata item="Nov" value="10">
        <cfchartdata item="Dec" value="6">
    </cfchartseries>
</cfchart>
Output
Figure: Rules to add bar border color and width.
Rules to add bar border color and width.
Example 3
In this example, you’ll add transparency to bars that are less than 20. Use alpha and set a value between 0-1.
code
<cfscript>
    plot={
        "rules"=[
            {
                "rule":"%v<20",
                "background-color":"pink",
                "border-color":"red",
                "border-width": "2px",
                "alpha":"0.2"
            },
            {
                "rule":"%v>=20",
                "background-color":"gray",
                "border-color":"green",
                "border-width": "2px"
            }
        ]
    }
</cfscript>
<cfchart format = "html" type = "bar" plot="#plot#"
      chartheight="500" chartwidth="900" showLegend=FALSE
       title="Monthly Average Temperatures (°C) from Jan to Dec">
   <cfchartseries>
        <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">
        <cfchartdata item="Jul" value="25">
        <cfchartdata item="Aug" value="24">
        <cfchartdata item="Sep" value="20">
        <cfchartdata item="Oct" value="15">
        <cfchartdata item="Nov" value="10">
        <cfchartdata item="Dec" value="6">
    </cfchartseries>
</cfchart>
Output
Figure: Add transparency to bars that are less than 20.
Add transparency to bars that are less than 20.
Example 4
In this example, you’ll plot a two-series line chart. You’ll apply rules to both lines and use the styling properties line-color, line-width, and line-style.
code
<cfscript>
    plot={
        "rules"=[
            {
                "rule":"%v<=20",
                "line-color":"##33ff98",
                "line-width": "4px",
                "line-style":"dashed"
            },
            {
                "rule":"%v>20",
                "line-color":"##ff5733",
                "line-width": "8px",
                "line-style":"solid"
            }
        ]
    }
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" 
title="Daily trend plots" plot="#plot#">
    <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
Figure: A two-series line chart with rules.
A two-series line chart with rules.
Apart from specifying the rules in a plot, you can also specify the rules in a rule array. For example,
[
{"rule" = "%v >= 40", "line-color" = "pink"},  
{"rule" = "%p >= 3", "line-color" = "yellow"}
]
Example
<cfscript>
    rules = [{"rule" = "%v >= 40", "line-color" = "pink"}, 
                 {"rule" = "%p >= 3", "line-color" = "yellow"}]
    plot = {"alpha-area" = 1, "contourOnTop" = true};
</cfscript>

<cfchart format = "html" showlegend = "false" chartheight = "400" chartwidth = "600"
             type = "line" plot = "#plot#" title = "Website Traffic Analysis 2024">
        <cfchartseries rules = "#rules#">
            <cfchartdata item = "Jan" value = "34.5">
            <cfchartdata item = "Feb" value = "78.2">
            <cfchartdata item = "Mar" value = "60.1">
            <cfchartdata item = "Apr" value = "43.0">
            <cfchartdata item = "May" value = "22.8">
            <cfchartdata item = "Jun" value = "59.7">
            <cfchartdata item = "Jul" value = "68.9">
            <cfchartdata item = "Aug" value = "53.4">
            <cfchartdata item = "Sep" value = "48.2">
            <cfchartdata item = "Oct" value = "64.1">
        </cfchartseries>
    
        <cfchartseries rules = "#rules#">
            <cfchartdata item = "Jan" value = "56.7">
            <cfchartdata item = "Feb" value = "65.3">
            <cfchartdata item = "Mar" value = "70.0">
            <cfchartdata item = "Apr" value = "55.2">
            <cfchartdata item = "May" value = "45.1">
            <cfchartdata item = "Jun" value = "52.3">
            <cfchartdata item = "Jul" value = "73.4">
            <cfchartdata item = "Aug" value = "60.0">
            <cfchartdata item = "Sep" value = "57.4">
            <cfchartdata item = "Oct" value = "66.8">
        </cfchartseries>
</cfchart>

Applying rules in cfchartseries for ColdFusion charts

Using rules, you can combine multiple chart series in a cfchartseries tag. For example,
Example 1- line
code
<cfscript>
    rules = [{"rule" = "%v >= 40", "line-color" = "pink"}, 
                 {"rule" = "%p >= 3", "line-color" = "yellow"}]
    plot = {"alpha-area" = 1, "contourOnTop" = true};
</cfscript>

<cfchart format = "html" showlegend = "false" chartheight = "400" chartwidth = "600"
             type = "line" plot = "#plot#" title = "Website Traffic Analysis 2024">
        <cfchartseries rules = "#rules#">
            <cfchartdata item = "Jan" value = "34.5">
            <cfchartdata item = "Feb" value = "78.2">
            <cfchartdata item = "Mar" value = "60.1">
            <cfchartdata item = "Apr" value = "43.0">
            <cfchartdata item = "May" value = "22.8">
            <cfchartdata item = "Jun" value = "59.7">
            <cfchartdata item = "Jul" value = "68.9">
            <cfchartdata item = "Aug" value = "53.4">
            <cfchartdata item = "Sep" value = "48.2">
            <cfchartdata item = "Oct" value = "64.1">
        </cfchartseries>
    
        <cfchartseries rules = "#rules#">
            <cfchartdata item = "Jan" value = "56.7">
            <cfchartdata item = "Feb" value = "65.3">
            <cfchartdata item = "Mar" value = "70.0">
            <cfchartdata item = "Apr" value = "55.2">
            <cfchartdata item = "May" value = "45.1">
            <cfchartdata item = "Jun" value = "52.3">
            <cfchartdata item = "Jul" value = "73.4">
            <cfchartdata item = "Aug" value = "60.0">
            <cfchartdata item = "Sep" value = "57.4">
            <cfchartdata item = "Oct" value = "66.8">
        </cfchartseries>
</cfchart>
Output
Figure: Two line charts using cfchartseries.
Two line charts using cfchartseries.
Example 2- step
code
<cfscript>
    rules = [{"rule" = "%v >= 40", "line-color" = "pink"}, 
                 {"rule" = "%p >= 3", "line-color" = "yellow"}]
    plot = {"alpha-area" = 1, "contourOnTop" = true};
</cfscript>

<cfchart format = "html" showlegend = "false" chartheight = "400" chartwidth = "600"
             type = "step" plot = "#plot#" title = "Website Traffic Analysis 2024">
        <cfchartseries rules = "#rules#">
            <cfchartdata item = "Jan" value = "34.5">
            <cfchartdata item = "Feb" value = "78.2">
            <cfchartdata item = "Mar" value = "60.1">
            <cfchartdata item = "Apr" value = "43.0">
            <cfchartdata item = "May" value = "22.8">
            <cfchartdata item = "Jun" value = "59.7">
            <cfchartdata item = "Jul" value = "68.9">
            <cfchartdata item = "Aug" value = "53.4">
            <cfchartdata item = "Sep" value = "48.2">
            <cfchartdata item = "Oct" value = "64.1">
        </cfchartseries>
    
        <cfchartseries rules = "#rules#">
            <cfchartdata item = "Jan" value = "56.7">
            <cfchartdata item = "Feb" value = "65.3">
            <cfchartdata item = "Mar" value = "70.0">
            <cfchartdata item = "Apr" value = "55.2">
            <cfchartdata item = "May" value = "45.1">
            <cfchartdata item = "Jun" value = "52.3">
            <cfchartdata item = "Jul" value = "73.4">
            <cfchartdata item = "Aug" value = "60.0">
            <cfchartdata item = "Sep" value = "57.4">
            <cfchartdata item = "Oct" value = "66.8">
        </cfchartseries>
</cfchart>
Output
Figure: Two stepped charts using cfchartseries.
Two stepped charts using cfchartseries.

Token reference table

Token
Usage
Recommended chart
%id
  
%node-count / %N
%node-count/%N
 
%node-goal-value' '%g'
 
Bullet Chart
%node-index' '%i' '%n'
%i
 
%node-percent-value' '%npv'
 
Funnel and Pie Charts only
   
%node-value' '%v'
%v
 
%offset-values'
%offset-values
fbar,hfbar
%output-percent-value'
%output-percent-value
Funnel
%pie-total-value'
%pie-total-value
Pie,ring
%plot-average' '%pavg'
%pavg
 
%plot-count' '%P'
%P
 
%plot-description'
  
%plot-index' '%p'
%p
 
%plot-max-index' '%pxi'
%pxi
 
%plot-max-value' '%pxv'
  
%plot-min-index' '%pmi'
  
%plot-min-value' '%pmv'
  
%plot-percent' '%pper'
%pper
 
%plot-sum' '%psum'
  
%plot-text' '%t'
  
%plot-text-#' '%t#'
  
%plot-values' '%pv'
  
%plot-sum' '%psum'
  
%plot-text' '%t'
  
%plot-text-#' '%t#'
  
%scale-index' '%scale-position' '%i' '%c'
  
%scale-key-label' '%kl'
  
%stack-average'
 
Bar Charts
%stack-length'
 
Bar Charts
%stack-total'
 
Bar Charts
   
%total'
 
Bar charts
%v0'
%v0
Bubble
%v1'
%v1
Bubble
%v2' '%node-size-value'
%v2
Bubble
%scale-key-text-#' '%kt#'
  
%scale-key-value' '%kv' '%k'
  
%scale-label' '%l' '%t'
  
%scale-value-text' '%vt'
  
%scale-value-value' '%vv'
  

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