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

Other ColdFusion chart types

Last update:
May 18, 2026

Cone charts in ColdFusion

A cone chart is a type of 3D bar chart where the bars are shaped like cones. It helps visualize comparisons, trends, or hierarchical data in a more engaging way. The height of each cone represents a value, making it easy to compare different data points. A cone chart is useful for comparing data across categories, displaying trends over time, or creating reports.
Example
<cfchart format="html"
                    show3D="no"
                    seriesPlacement="default"
                    gridLines=11
                    xAxisTitle="Year"
                    yAxisTitle="Revenue"
                    sortXAxis="yes"
                    tipStyle="mousedown"
                    tipBgColor="silver"
                    font="Courier"
                    fontBold="no"
                    fontItalic="no"
                    showLegend="yes"
                    width="800"
                    height="600"
                    title="Cone chart">
                <cfchartseries 
                        type="cone"
                        seriesLabel="Company A"
                        seriesColor="navy">
                    <cfchartdata item="1997" value="42000">
                    <cfchartdata item="1998" value="82000">
                    <cfchartdata item="1999" value="58000">    
                    <cfchartdata item="2000" value="70000">
                </cfchartseries>
                <cfchartseries 
                        type="cone"
                        seriesLabel="Company B"
                        seriesColor="teal">
                    <cfchartdata item="1997" value="60000">
                    <cfchartdata item="1998" value="75000">
                    <cfchartdata item="1999" value="70000">    
                    <cfchartdata item="2000" value="85000">
                </cfchartseries>
                <cfchartseries 
                        type="cone"
                        seriesLabel="Company C"
                        seriesColor="olive">
                    <cfchartdata item="1998" value="40000">
                    <cfchartdata item="1999" value="50000">    
                    <cfchartdata item="2000" value="60000">
                </cfchartseries>
                <cfchartseries 
                        type="cone"
                        seriesLabel="Company D"
                        seriesColor="maroon">
                    <cfchartdata item="1997" value="85000">
                    <cfchartdata item="1998" value="100000">
                    <cfchartdata item="1999" value="120000">    
                    <cfchartdata item="2000" value="150000">
                </cfchartseries>
</cfchart>
Output

Cylinder charts in ColdFusion

A cylinder chart is a type of 3D bar chart where the bars are shaped like cylinders instead of rectangles. It works similarly to a column chart but adds a 3D effect for better visual appeal. The height of each cylinder represents a data value, making it useful for comparisons and trend analysis.
Example
<cfchart format="html"
                    show3D="no"
                    seriesPlacement="default"
                    gridLines=11
                    xAxisTitle="Year"
                    yAxisTitle="Revenue"
                    sortXAxis="yes"
                    tipStyle="mousedown"
                    tipBgColor="silver"
                    font="Courier"
                    fontBold="no"
                    fontItalic="no"
                    showLegend="no"
                    width="800"
                    height="600"
                    title="Cylinder chart">
                <cfchartseries 
                        type="cylinder"
                        seriesLabel="Company A"
                        seriesColor="navy">
                    <cfchartdata item="2021" value="42000">
                    <cfchartdata item="2022" value="82000">
                    <cfchartdata item="2023" value="58000">    
                    <cfchartdata item="2024" value="70000">
                </cfchartseries>
                <cfchartseries 
                        type="cylinder"
                        seriesLabel="Company B"
                        seriesColor="teal">
                    <cfchartdata item="2021" value="60000">
                    <cfchartdata item="2022" value="75000">
                    <cfchartdata item="2023" value="70000">    
                    <cfchartdata item="2024" value="85000">
                </cfchartseries>
                <cfchartseries 
                        type="cylinder"
                        seriesLabel="Company C"
                        seriesColor="olive">
                    <cfchartdata item="2021" value="40000">
                    <cfchartdata item="2022" value="50000">    
                    <cfchartdata item="2023" value="60000">
                    <cfchartdata item="2024" value="75000">
                </cfchartseries>
                <cfchartseries 
                        type="cylinder"
                        seriesLabel="Company D"
                        seriesColor="maroon">
                    <cfchartdata item="2021" value="85000">
                    <cfchartdata item="2022" value="100000">
                    <cfchartdata item="2023" value="120000">    
                    <cfchartdata item="2024" value="150000">
                </cfchartseries>
</cfchart>
Output

Piano charts in ColdFusion

A piano chart is a matrix-like chart where each cell is colored based on the value it represents, making it easier to identify patterns, trends, and outliers within the data.
<cfchart format="html" type="piano" showlegend="false" chartHeight="600" chartWidth="800" title="Piano Chart" theme="vernal_dark" yaxisTitle="Value">
    <cfchartseries>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
        <cfchartdata item="2018" value=#randrange(10,100)#>
        <cfchartdata item="2019" value=#randrange(10,100)#>
        <cfchartdata item="2020" value=#randrange(10,100)#>
        <cfchartdata item="2021" value=#randrange(10,100)#>
        <cfchartdata item="2022" value=#randrange(10,100)#>
        <cfchartdata item="2023" value=#randrange(10,100)#>
        <cfchartdata item="2024" value=#randrange(10,100)#>
    </cfchartseries>
    <cfchartseries>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
        <cfchartdata item="2018" value=#randrange(10,100)#>
        <cfchartdata item="2019" value=#randrange(10,100)#>
        <cfchartdata item="2020" value=#randrange(10,100)#>
        <cfchartdata item="2021" value=#randrange(10,100)#>
        <cfchartdata item="2022" value=#randrange(10,100)#>
        <cfchartdata item="2023" value=#randrange(10,100)#>
        <cfchartdata item="2024" value=#randrange(10,100)#>
    </cfchartseries>
    <cfchartseries>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
        <cfchartdata item="2018" value=#randrange(10,100)#>
        <cfchartdata item="2019" value=#randrange(10,100)#>
        <cfchartdata item="2020" value=#randrange(10,100)#>
        <cfchartdata item="2021" value=#randrange(10,100)#>
        <cfchartdata item="2022" value=#randrange(10,100)#>
        <cfchartdata item="2023" value=#randrange(10,100)#>
        <cfchartdata item="2024" value=#randrange(10,100)#>
    </cfchartseries>
    <cfchartseries>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
        <cfchartdata item="2018" value=#randrange(10,100)#>
        <cfchartdata item="2019" value=#randrange(10,100)#>
        <cfchartdata item="2020" value=#randrange(10,100)#>
        <cfchartdata item="2021" value=#randrange(10,100)#>
        <cfchartdata item="2022" value=#randrange(10,100)#>
        <cfchartdata item="2023" value=#randrange(10,100)#>
        <cfchartdata item="2024" value=#randrange(10,100)#>
    </cfchartseries>
    <cfchartseries>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
        <cfchartdata item="2018" value=#randrange(10,100)#>
        <cfchartdata item="2019" value=#randrange(10,100)#>
        <cfchartdata item="2020" value=#randrange(10,100)#>
        <cfchartdata item="2021" value=#randrange(10,100)#>
        <cfchartdata item="2022" value=#randrange(10,100)#>
        <cfchartdata item="2023" value=#randrange(10,100)#>
        <cfchartdata item="2024" value=#randrange(10,100)#>
    </cfchartseries>
    <cfchartseries>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
        <cfchartdata item="2018" value=#randrange(10,100)#>
        <cfchartdata item="2019" value=#randrange(10,100)#>
        <cfchartdata item="2020" value=#randrange(10,100)#>
        <cfchartdata item="2021" value=#randrange(10,100)#>
        <cfchartdata item="2022" value=#randrange(10,100)#>
        <cfchartdata item="2023" value=#randrange(10,100)#>
        <cfchartdata item="2024" value=#randrange(10,100)#>
    </cfchartseries>
</cfchart>
Output

Bullet charts in ColdFusion

A bullet chart is a visualization used to display performance metrics against a target.
<cfchart format="html" height=600 width=800 title="Bullet chart example" xaxistitle="Department" yaxistitle="Revenue" showLegend="FALSE">
    <cfchartseries  type="bullet">
        <cfchartdata value="5000" zvalue="10000" item="Sales">
        <cfchartdata value="15000" zvalue="10000" item="Marketing">
        <cfchartdata value="20000" zvalue="10000" item="Engineering">
        <cfchartdata value="5000" zvalue="10000" item="Production">
        <cfchartdata value="10000" zvalue="10000" item="Finance">
    </cfchartseries>
</cfchart>
Similarly, you can plot a horizontal bullet chart using hbullet as type.
<cfchart format="html" height=600 width=800 title="Bullet chart example" xaxistitle="Department" yaxistitle="Revenue" showLegend="FALSE">
    <cfchartseries  type="hbullet">
        <cfchartdata value="5000" zvalue="10000" item="Sales">
        <cfchartdata value="15000" zvalue="10000" item="Marketing">
        <cfchartdata value="20000" zvalue="10000" item="Engineering">
        <cfchartdata value="5000" zvalue="10000" item="Production">
        <cfchartdata value="10000" zvalue="10000" item="Finance">
    </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