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

Create area charts in ColdFusion

Last update:
May 18, 2026
An area chart, also known as an area graph, represents quantitative data graphically. It's like a line chart but with the area between it and the x-axis filled with color or shading.

Area chart with stepped area

A stepped area chart is a type of data visualization that is like a standard area chart, but with a key difference. The lines connecting the data points in a stepped area chart are angled in a staircase-like fashion rather than being straight.
In this example, the script uses the following plot customization options:
  • alpha-area: The attribute defines the transparency of the plot. The range is from 0 (clear) to 1 (solid). 
  • contourOnTop: The attribute determines whether contour lines are drawn on top of the area chart. A contour line appears on top of the shaded area.
  • segmentTrackers: If segmentTracker's value is true, the values will be displayed on hover along the line as well. Otherwise, the values will be displayed only while hovering over the data points.
Example 1
Use segmentTrackers=false in the plot options.
code
<cfscript>
    plot={
        "alpha-area":1,
        "contourOnTop":true,
        "segmentTrackers": "false" // if true, the values will be displayed on hover
    };
</cfscript>
<cfchart
    format="html"
    scalefrom="0"
    scaleto="1200000"
    showlegend="false"
    chartheight="400"
    chartwidth="600"
    plot="#plot#"
   title="Website Traffic 2024">
  <cfchartseries type="steppedarea">
    <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
Example 2
Use segmentTrackers=true in the plot options.
code
<cfscript>
    plot={
        "alpha-area":1,
        "contourOnTop":true,
        "segmentTrackers": "true" // if true, the values will be displayed on hover
    };
</cfscript>
<cfchart
    format="html"
    scalefrom="0"
    scaleto="1200000"
    showlegend="false"
    chartheight="400"
    chartwidth="600"
    plot="#plot#"
   title="Website Traffic 2024">
  <cfchartseries type="steppedarea">
    <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
Example 3
Using "contourOnTop"=true
code
<cfscript>
       plot={
        "alpha-area"=1,
        "contourOnTop"=true
       };
</cfscript>
<cfchart
   format="html"
   scalefrom="0"
   scaleto="1200000"
   showlegend="false"
   chartheight="400"
   chartwidth="600"
    plot="#plot#"
    alpha="1"
   title="Website Traffic 2023">
  <cfchartseries type="curvedarea">
    <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>
   <cfchartseries type="curvedarea">
    <cfchartdata item="January" value="703100">
    <cfchartdata item="February" value="520310">
    <cfchartdata item="March" value="888700">
    <cfchartdata item="April" value="786500">
    <cfchartdata item="May" value="963911">
    <cfchartdata item="June" value="1015321">
   </cfchartseries>
</cfchart>
Output
As you can see, when contourOnTop is True, the contour lines are visible above the shaded regions of the area chart.
Example 4
Using "contourOnTop"=false
code
<cfscript>
       plot={
        "alpha-area"=1,
        "contourOnTop"=false
       };
</cfscript>
<cfchart
   format="html"
   scalefrom="0"
   scaleto="1200000"
   showlegend="false"
   chartheight="400"
   chartwidth="600"
    plot="#plot#"
    alpha="1"
   title="Website Traffic 2023">
  <cfchartseries type="curvedarea">
    <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>
   <cfchartseries type="curvedarea">
    <cfchartdata item="January" value="703100">
    <cfchartdata item="February" value="520310">
    <cfchartdata item="March" value="888700">
    <cfchartdata item="April" value="786500">
    <cfchartdata item="May" value="963911">
    <cfchartdata item="June" value="1015321">
   </cfchartseries>
</cfchart>
Output

Area chart with curved area

A curved area chart is a variation of the standard area chart. Instead of using straight line segments to connect the data points, this chart draws a fitted curve to connect the data points. The area between the curve and the x-axis is filled with color.
Example  
Reuse the previous example with cfchartseries type="curvedarea".
code
<cfscript> 
    plot={ 
        "alpha-area":1, 
        "contourOnTop":true, 
        "segmentTrackers": "false" // if true, the values will be displayed on hover 
    }; 
</cfscript> 

<cfchart 
    format="html" 
    scalefrom="0" 
    scaleto="1200000" 
    showlegend="false" 
    chartheight="400" 
    chartwidth="600" 
    plot="#plot#" 
    title="Website Traffic 2024"> 

  <cfchartseries type="curvedarea"> 
    <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

Area chart with vertical area

A vertical area chart is a variation of the standard area chart where the roles of the x and y axes are interchanged. In a typical area chart, the x-axis represents categories or time periods, and the y-axis represents numerical values. In a vertical area chart, this is flipped. The y-axis represents categories or time periods, and the x-axis represents numerical values.
Example
Reuse the previous example with cfchartseries type="varea".
code
<cfscript>
    plot={
        "alpha-area":1,
        "contourOnTop":true,
        "segmentTrackers": "true" // if true, the values will be displayed on hover
    };
</cfscript>
<cfchart
    format="html"
    scalefrom="0"
    scaleto="1200000"
    showlegend="false"
    chartheight="400"
    chartwidth="600"
    plot="#plot#"
   title="Website Traffic 2024">
  <cfchartseries type="varea">
    <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

Clustered and stacked area charts

Additionally, for stepped, vertical, and curved area charts, you can cluster two or more charts. In the plot customization options, use stacked=true to create a clustered chart.
Example 1
Create a stacked stepped area chart.
code
<cfscript>
    plot={
        "alpha-area":1,
        "contourOnTop": "true",
        "stepped": "true",
        "stacked": "true"
    }
</cfscript>
<cfchart format ="html" type="steppedarea" width="600" height="400" plot="#plot#" 
title="Stacked stepped area chart">
    <cfchartseries label="Week 1">
        <cfchartdata item=1 value=10>
        <cfchartdata item=2 value=20>
        <cfchartdata item=3 value=30>
        <cfchartdata item=4 value=20>
        <cfchartdata item=5 value=40>
    </cfchartseries>
    <cfchartseries label="Week 2">
        <cfchartdata item=1 value=0>
        <cfchartdata item=2 value=30>
        <cfchartdata item=3 value=-36>
        <cfchartdata item=4 value=29>
        <cfchartdata item=5 value=48>
    </cfchartseries>
</cfchart>
Output
Example 2
Reuse the script to create a clustered stepped area chart. In this case, the stepped area charts are represented by two continuous clusters. The negative values are represented below the zero scale.
code
<cfscript>
    plot={
        "alpha-area":1,
        "contourOnTop": "true",
        "clustered": "true"
    }
</cfscript>
<cfchart format ="html" type="steppedarea" width="600" height="400" plot="#plot#" title="Clustered stepped area chart">
    <cfchartseries label="Week 1">
        <cfchartdata item=1 value=10>
        <cfchartdata item=2 value=20>
        <cfchartdata item=3 value=30>
        <cfchartdata item=4 value=20>
        <cfchartdata item=5 value=40>
    </cfchartseries>
    <cfchartseries label="Week 2">
        <cfchartdata item=1 value=0>
        <cfchartdata item=2 value=30>
        <cfchartdata item=3 value=-36>
        <cfchartdata item=4 value=29>
        <cfchartdata item=5 value=48>
    </cfchartseries>
</cfchart>
Output

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