Whatever message this page gives is out now! Go check it out!
Create donut charts in ColdFusion
Last update:
May 18, 2026
A donut chart is a type of pie chart with a central hole that resembles a donut. This central hole can make it easier to read and understand, as it better focuses on the proportions of the segments relative to the whole.
The ring chart type allows you create donut charts.
Create a donut chart in ColdFusion
scaleR attribute
In ColdFusion, the scaleR attribute is used to configure the scale of donut charts. The aperture and refAngle properties of the scaleR attribute perform the following:
- aperture: This property sets the degree that the scale should occupy. You can change this by adding an aperture attribute to the scaleR object. For example, an aperture value of 180 would create a semi-circle. An aperture value of 360 creates a full-circle chart.
- refAngle: This property sets the rotation angle of the chart. A refAngle of 45 degrees and aperture of 180 rotates the semi-circle donut chart by 45 degrees.
Example 1
In this example, the script uses a refAngle of 0 and aperture of 360.
<cfscript>
scaleR={"refAngle":0,"aperture":360}
</cfscript>
<cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Website Traffic">
<cfchartseries type="ring" serieslabel="2024">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
Example 2
In this example, the script uses a refAngle of 180 and aperture of 180.
<cfscript>
scaleR={"refAngle":180,"aperture":180}
</cfscript>
<cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Website Traffic">
<cfchartseries type="ring" serieslabel="2024">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
Example 3
In this example, the script uses a refAngle of 180 and aperture of 360.
<cfscript>
scaleR={"refAngle":180,"aperture":360}
</cfscript>
<cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Website Traffic">
<cfchartseries type="ring" serieslabel="2024">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
Example 4
In this example, the script uses a refAngle of 180 and aperture of 270.
<cfscript>
scaleR={"refAngle":180,"aperture":270}
</cfscript>
<cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Website Traffic">
<cfchartseries type="ring" serieslabel="2024">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
Slice attribute
In ColdFusion, the slice attribute controls the size of the ring in the donut chart. You can specify your desired ring size as a percentage or pixel value. For example, a slice of 50% means that the donut chart starts at 50% of its radius. The percentage is relative to the radius of the donut.
Use the plot object to specify the slice property.
plot = {"slice":"50%"}
Example 1- slice is 50%
<cfscript>
plot = {"slice":"50%"}
</cfscript>
<cfchart format="html" type="ring" chartWidth="600" chartHeight="400"
title="Website traffic 2023" plot="#plot#">
<cfchartseries serieslabel="Visits">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
Example 2- slice is 25%
<cfscript>
plot = {"slice":"25%"}
</cfscript>
<cfchart format="html" type="ring" chartWidth="600" chartHeight="400"
title="Website traffic 2023" plot="#plot#">
<cfchartseries serieslabel="Visits">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
Example 3- slice is 75%
<cfscript>
plot = {"slice":"75%"}
</cfscript>
<cfchart format="html" type="ring" chartWidth="600" chartHeight="400"
title="Website traffic 2023" plot="#plot#">
<cfchartseries serieslabel="Visits">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>Output
On the other hand, if you do not want to use the slice attribute, you can do so as well. The following example doesn’t use the attribute. However, by default, the ring size will be 35%, if you do not specify the slice attribute.
For example,
<cfchart format="html" type="ring" chartWidth="600" chartHeight="400" title="Website traffic 2023">
<cfchartseries serieslabel="Visits">
<cfchartdata item="January" value="6000">
<cfchartdata item="February" value="3456">
<cfchartdata item="March" value="446">
<cfchartdata item="April" value="7887">
<cfchartdata item="May" value="4356">
<cfchartdata item="June" value="789">
</cfchartseries>
</cfchart>
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Share additional feedback to help us improve.
0/255
|
