Last updated on
Feb 25, 2025
Create a basic bar chart
A bar chart represents categorical data using rectangular bars. The length or height of each bar is proportional to the value it represents. Bar charts can be plotted either vertically or horizontally, and they are commonly used to compare different categories or to show changes over time.
Create your first basic chart using the code sample below:
<cfchart format="html" type="bar" showlegend="false" chartHeight="600" chartWidth="400" title="Basic Chart">
<cfchartseries>
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
<cfchart format="html" type="bar" showlegend="false" chartHeight="600" chartWidth="400" title="Basic Chart">
<cfchartseries>
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
<cfchart format="html" type="bar" showlegend="false" chartHeight="600" chartWidth="400" title="Basic Chart">
<cfchartseries>
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
Output
Create a 3d bar chart
To convert the above chart to 3D chart, all you need to do is specify the show3d attribute as true within the cfchart tag, as shown in the following example.
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Basic Chart" show3d="true">
<cfchartseries>
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Basic Chart" show3d="true">
<cfchartseries>
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Basic Chart" show3d="true">
<cfchartseries>
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
Output
Customize a bar chart
cfchart uses JSON-based styles, which are easily customizable. ColdFusion provides default styles for each type of chart, but you can override the style using your own style file. The following example uses a custom style file to customize the title's font and background.
my_custom_style.json
{
"graphset" : [
{
"type" : "bar",
"title" : {
"font-size" : 18,
"color" : "#FF0000",
"bold" : true,
"font-family" : "Verdana",
"background-color" : "#cccccc",
"border-color" : "#cccccc",
"border-width" : 1
}
}
]
}
{
"graphset" : [
{
"type" : "bar",
"title" : {
"font-size" : 18,
"color" : "#FF0000",
"bold" : true,
"font-family" : "Verdana",
"background-color" : "#cccccc",
"border-color" : "#cccccc",
"border-width" : 1
}
}
]
}
{
"graphset" : [
{
"type" : "bar",
"title" : {
"font-size" : 18,
"color" : "#FF0000",
"bold" : true,
"font-family" : "Verdana",
"background-color" : "#cccccc",
"border-color" : "#cccccc",
"border-width" : 1
}
}
]
}
Use the JSON in the cfm file, as shown below:
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="my_custom_style.json" title="Sales report">
<cfchartseries>
<cfchartdata item="2012" value=#randrange(10,100)#>
<cfchartdata item="2013" value=#randrange(10,100)#>
<cfchartdata item="2014" value=#randrange(10,100)#>
<cfchartdata item="2015" value=#randrange(10,100)#>
<cfchartdata item="2016" value=#randrange(10,100)#>
<cfchartdata item="2017" value=#randrange(10,100)#>
</cfchartseries>
</cfchart>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="my_custom_style.json" title="Sales report">
<cfchartseries>
<cfchartdata item="2012" value=#randrange(10,100)#>
<cfchartdata item="2013" value=#randrange(10,100)#>
<cfchartdata item="2014" value=#randrange(10,100)#>
<cfchartdata item="2015" value=#randrange(10,100)#>
<cfchartdata item="2016" value=#randrange(10,100)#>
<cfchartdata item="2017" value=#randrange(10,100)#>
</cfchartseries>
</cfchart>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="my_custom_style.json" title="Sales report">
<cfchartseries>
<cfchartdata item="2012" value=#randrange(10,100)#>
<cfchartdata item="2013" value=#randrange(10,100)#>
<cfchartdata item="2014" value=#randrange(10,100)#>
<cfchartdata item="2015" value=#randrange(10,100)#>
<cfchartdata item="2016" value=#randrange(10,100)#>
<cfchartdata item="2017" value=#randrange(10,100)#>
</cfchartseries>
</cfchart>
Output
Create a two-series bar chart
Use the following cfm file to create a two-series bar chart.
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart">
<cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="##11a464 ">
<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="bar" serieslabel="HCT" markerstyle="diamond" color="##116fa4" >
<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>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart">
<cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="##11a464 ">
<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="bar" serieslabel="HCT" markerstyle="diamond" color="##116fa4" >
<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>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart">
<cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="##11a464 ">
<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="bar" serieslabel="HCT" markerstyle="diamond" color="##116fa4" >
<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
