Whatever message this page gives is out now! Go check it out!
Customize a ColdFusion chart using cfchart
Last update:
May 18, 2026
ColdFusion provides the <cfchart> tag to create and customize charts for web applications. By leveraging various attributes and nested tags, users can modify chart appearance, style, and behavior.
The <cfchart> tag generates a chart with default settings. Users can customize it using attributes such as format, show3d, chartHeight, chartWidth, and more.
Example
<cfchart format="html" chartheight="300" chartwidth="500">
<cfchartseries type="bar">
<cfchartdata item="Q1" value="100"/>
<cfchartdata item="Q2" value="150"/>
<cfchartdata item="Q3" value="200"/>
Using the arrows attribute
</cfchartseries>
</cfchart>Customize chart appearance
Set chart dimensions
chartWidth and chartHeight define the size of the chart in pixels.
<cfchart format="html" chartwidth="600" chartheight="400">...</cfchart>
Chart format
Supported formats: png, jpg, html, svg.
<cfchart format="html">...</cfchart>
Enable 3D effects
Use show3d="yes" to add a 3D effect to charts.
<cfchart format="html" show3d="yes">...</cfchart>
Customize chart colors
Background and border colors
- Use backgroundColor to set the background color.
- Use border to enable or disable chart borders.
<cfchart format="html" backgroundColor="##FFFFFF" border="yes">...</cfchart>
Customize series colors
Define colors for different data series using
colorlist in <cfchartseries>.<cfchartseries type="bar" colorlist="red,blue,green">...</cfchartseries>
Customize labels and titles
Chart title
- title: Defines the main title of the chart.
- xAxisTitle and yAxisTitle: Label the axes for bar and line charts.
<cfchart format="html" type="bar" title="Monthly Sales" xAxisTitle="Months" yAxisTitle="Revenue ($)"> </cfchart>
Customize data representation
Using to define data
The <cfchartseries> tag specifies the data type and values.
<cfchart format="png" type="bar">
<cfchartseries type="bar">
<cfchartdata item="January" value="5000">
<cfchartdata item="February" value="7000">
<cfchartdata item="March" value="6000">
</cfchartseries>
</cfchart>Multiple series for comparative data
Add multiple <cfchartseries> for grouped bar charts or multi-line charts.
<cfchart format="html" type="bar">
<cfchartseries type="bar" seriesLabel="Product A">
<cfchartdata item="Q1" value="2000">
<cfchartdata item="Q2" value="3000">
</cfchartseries>
<cfchartseries type="bar" seriesLabel="Product B">
<cfchartdata item="Q1" value="2500">
<cfchartdata item="Q2" value="3500">
</cfchartseries>
</cfchart>Dynamically poopulating data from a query
<cfquery name="salesData" datasource="myDB">
SELECT month, revenue FROM sales_table
</cfquery>
<cfchart format="html" type="line">
<cfchartseries type="line">
<cfloop query="salesData">
<cfchartdata item="#month#" value="#revenue#">
</cfloop>
</cfchartseries>
</cfchart>Customizing chart legends and tooltips
Enabling and styling legends
- showLegend: Displays the legend.
- legendPosition: Places it on top, bottom, left, or right.
<cfchart format="html" type="pie" showLegend="yes" legendPosition="right">..</cfchart>
Use tooltips for data points
- showMarkers="yes" displays interactive markers.
- markerSize adjusts marker size.
<cfchart format="html" type="line" showMarkers="yes" markerSize="6">...</cfchart>
Customizing tooltips
Tooltips make charts more interactive by displaying additional information when a user hovers over (or clicks) a data point. In ColdFusion charts, you can:
- Turn tooltips on or off.
- Control how and when they appear.
- Customize the tooltip’s background, border, and text.
- Define what text is shown, including labels and formatted values.
- Apply different tooltip styles per series.
This section shows how to configure tooltips using only the cfchart and cfchartseries tags.
Basic tooltip behavior (tipStyle)
In earlier server‑side charting implementations, tooltips are controlled by the tipStyle attribute.
The tipStyle attribute accepts these values:
- mouseover: show a tooltip when the user hovers over a data point.
- mousedown: show a tooltip when the user clicks a data point.
- none: disable tooltips.
Note: In Adobe ColdFusion (2025 release), FORMAT="flash" has been removed from cfchart. Use format="html", format="png", format="jpg", or format="svg". For modern charts, prefer the tooltip struct on cfchart or cfchartseries as shown in the examples that follow.
Styling all tooltips
For HTML/PNG/JPG/SVG charts, you can style tooltips using the tooltip attribute on the cfchart tag. The value is a ColdFusion struct that corresponds to tooltip properties such as background color, border, padding, and text color.
Common keys include (not exhaustive):
- "background-color" – background color of the tooltip.
- "border-color", "border-width" – border styling.
- "font-color", "font-size" – text color and size.
- "padding" – inner padding around the text.
- "shadow" – whether to draw a drop shadow.
- "text" – content to display inside the tooltip
When you set tooltip on cfchart, the style applies to all series in that chart, unless it is overridden at the series level.
<cfscript>
tooltipStyle = {
"background-color" = "##000000", // black background
"border-color" = "##ffffff", // white border
"border-width" = 1,
"font-color" = "##ffffff", // white text
"font-size" = 12,
"padding" = "6 10",
"shadow" = true
};
</cfscript>
<cfchart
format = "html"
type = "line"
title = "Monthly Sales"
tooltip = "#tooltipStyle#">
<cfchartseries type="line" seriesLabel="Sales (USD)">
<cfchartdata item="Jan" value="12000" />
<cfchartdata item="Feb" value="15000" />
<cfchartdata item="Mar" value="18000" />
</cfchartseries>
</cfchart>Series‑specific tooltip styling
You can also apply tooltip styling at the series level by using the tooltip attribute on cfchartseries. This is useful when you want different tooltip content or colors for different series, such as “Actual” vs “Forecast”.
Series‑level tooltip settings override the chart‑level tooltip style for that series.
<cfchart
format = "html"
type = "line"
title = "Actual vs Forecast Sales">
<!--- Actual series with green tooltip --->
<cfchartseries
type = "line"
seriesLabel = "Actual"
tooltip = "#actualTooltip#">
<cfchartdata item="Q1" value="120000" />
<cfchartdata item="Q2" value="135000" />
<cfchartdata item="Q3" value="142000" />
<cfchartdata item="Q4" value="155000" />
</cfchartseries>
<!--- Forecast series with blue tooltip --->
<cfchartseries
type = "line"
seriesLabel = "Forecast"
tooltip = "#forecastTooltip#">
<cfchartdata item="Q1" value="115000" />
<cfchartdata item="Q2" value="140000" />
<cfchartdata item="Q3" value="150000" />
<cfchartdata item="Q4" value="160000" />
</cfchartseries>
</cfchart>Tooltip tokens
The tooltip text property supports tokens that are replaced with values at runtime. Common tokens include:
| Token | Description |
|---|---|
| %t | Series label (for example, “Sales”) |
| %k | Item label (category / x‑axis label) |
| %v | Data value for the point |
You can combine these tokens to build more descriptive tooltips.
<cfscript>
detailedTooltip = {
"background-color" = "##343a40",
"font-color" = "##ffffff",
"padding" = "6 10",
"border-radius" = 3,
// Example text: "Sales / Jan: 12000"
"text" = "%t / %k: %v"
};
</cfscript>
<cfchart
format = "html"
type = "line"
title = "Monthly Sales (Detailed Tooltips)"
tooltip = "#detailedTooltip#">
<cfchartseries
type = "line"
seriesLabel = "Sales">
<cfchartdata item="Jan" value="12000" />
<cfchartdata item="Feb" value="15000" />
<cfchartdata item="Mar" value="18000" />
</cfchartseries>
</cfchart>When you hover over a point, the tooltip displays text such as “Sales / Jan: 12000” .
Pie chart tooltip example
Tooltips are especially useful on pie charts to show the slice label and the value. The following example configures a pie chart with a dark tooltip and text that uses tokens to show both the label and the value as a currency amount.
<cfscript>
pieTooltip = {
"background-color" = "##343a40",
"font-color" = "##ffffff",
"border-radius" = 4,
"padding" = "6 10",
"shadow" = true,
"text" = "%t: $%v" // %t = slice label, %v = value
};
</cfscript>
<cfchart
format = "html"
type = "pie"
title = "Revenue by Channel"
tooltip = "#pieTooltip#">
<cfchartseries type="pie" seriesLabel="Channel">
<cfchartdata item="Web" value="500000" />
<cfchartdata item="Retail" value="350000" />
<cfchartdata item="Partners" value="200000" />
<cfchartdata item="Other" value="75000" />
</cfchartseries>
</cfchart>When the user hovers over a slice, the tooltip shows output such as “Web: $500000” .
Bar chart tooltips with percentage values
You can combine tooltip text with number formatting to show percentages or other numeric formats. In the following example, dataFormat="decimal" is used to keep decimal precision, and the tooltip text appends a % sign.
<cfscript>
barTooltip = {
"background-color" = "##212529",
"font-color" = "##f8f9fa",
"border-radius" = 3,
"padding" = "6 8",
"shadow" = true,
"text" = "%t: %v%%" // e.g., “Open Rate: 35.1%”
};
</cfscript>
<cfchart
format = "html"
type = "bar"
title = "Email Open Rate by Campaign"
tooltip = "#barTooltip#">
<cfchartseries
type = "bar"
seriesLabel= "Open Rate"
dataFormat = "decimal">
<cfchartdata item="Welcome" value="42.5" />
<cfchartdata item="Promotion" value="35.1" />
<cfchartdata item="Re‑engagement" value="28.7" />
</cfchartseries>
</cfchart>Hovering over a bar displays tooltips such as “Open Rate: 42.5%” .
For more advanced numeric formatting, such as short units or scientific notation, see Enhance your charts with data formatting in ColdFusion .
Dark "card‑style" tooltip
You can emulate common UI framework tooltips by using a small font size, dark background, and light text.
<cfscript>
bootstrapTooltip = {
"background-color" = "##000000",
"font-color" = "##ffffff",
"font-size" = 12,
"border-radius" = 4,
"padding" = "4 8",
"shadow" = true
};
</cfscript>
<cfchart
format = "html"
type = "line"
title = "Daily Active Users"
tooltip = "#bootstrapTooltip#">
<cfchartseries type="line" seriesLabel="DAU">
<cfchartdata item="Mon" value="1023" />
<cfchartdata item="Tue" value="1150" />
<cfchartdata item="Wed" value="1234" />
<cfchartdata item="Thu" value="1198" />
<cfchartdata item="Fri" value="1302" />
</cfchartseries>
</cfchart>Customize axes and gridlines
Adjust axis scale
- xAxis and xAxis2: Format X axes and sexond X axes.
- yAxis and yAxis2: Format Y axes and sexond Y axes.
Display and hide gridlines
- Set showXGridlines or showYGridlines to TRUE or FALSE.
<cfchart format="html" type="line" showXGridlines="no">...</cfchart>
Create a dynamic refresh chart
A major use-case of dynamic charts is the depiction of real-time data. In such cases, the chart needs to show new data at regular intervals of time.
Using a full refresh feed, you can refresh the whole chart at regular intervals. When there is no relevance for the old values and the chart only needs to show the latest numbers, use a full refresh chart.
In such a chart, you need a URL from which the chart tries to get latest data at a specified interval.
<!--- refresh.cfm --->
<cfchart format="html" refresh="#{"type"="full","interval":"2","url":"feed.cfm"}#" chartWidth="800" chartHeight="600"/><!--- feed.cfm --->
<cfscript>
values1=values2=values3=[];
for (i=1;i<=5;i++){
values1[i]=randRange(20,40);
}
for (i=1;i<=5;i++){
values2[i]=randRange(40,60);
}
for (i=1;i<=5;i++){
values3[i]=randRange(60,80);
}
</cfscript>
{
"graphset" : [
{
"type" : "bar",
"refresh" : {
"type" : "full",
"interval" : 2
},
"title" : {
"text" : "Full Refresh Chart"
},
"series" : [
{
"values" : <cfoutput>#serializeJSON(values1)#</cfoutput>
},
{
"values" : <cfoutput>#serializeJSON(values2)#</cfoutput>
},
{
"values" : <cfoutput>#serializeJSON(values3)#</cfoutput>
}]
}]
}Download
Get file Click to view the output. This is an MP4 movie file.
Using the arrows attribute
<cfscript>
arrows=[{"backgroundColor":"red","label":{"text":"Data for 2017","bold":true,"backgroundColor":"white"},
"size":6,"from":{"x":200,"y":100},"to":{"x":400,"y":200}}];
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Chart with arrow" show3d="true"
arrows="#arrows#">
<cfchartseries >
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>Output
Using the aspect3d attribute when true3d=false
<cfscript>
aspect3d={"angle":90,"depth":100,"true3d":false};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"
show3d="true">
<cfchartseries type="bar" 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="bar" 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
Using the aspect3d attribute when true3d=true
<cfscript>
aspect3d={"angle":90,"depth":100,"true3d":true};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"
show3d="true">
<cfchartseries type="bar" 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="bar" 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
Using the background attribute
<cfscript>
background={};
background={"color":"red","color-2":"green"};
</cfscript>
<cfchart
format="html"
scalefrom="0"
scaleto="1200000"
showlegend="true"
chartheight="400"
chartwidth="600"
background="#background#" >
<cfchartseries
type="bar"
serieslabel="Website Traffic 2016"
seriescolor="blue">
<cfchartdata item="January" value="503100">
<cfchartdata item="February" value="720310">
<cfchartdata item="March" value="688700">
<cfchartdata item="April" value="986500">
<cfchartdata item="May" value="1063911">
<cfchartdata item="June" value="1115321">
</cfchartseries>
<cfchartseries
type="bar"
serieslabel="Website Traffic 2015"
seriescolor="yellow">
<cfchartdata item="January" value="#RandRange(300000, 900000)#">
<cfchartdata item="February" value="#RandRange(300000, 900000)#">
<cfchartdata item="March" value="#RandRange(300000, 900000)#">
<cfchartdata item="April" value="#RandRange(300000, 900000)#">
<cfchartdata item="May" value="#RandRange(300000, 900000)#">
<cfchartdata item="June" value="#RandRange(300000, 900000)#">
</cfchartseries>
</cfchart>Output
Using the border attribute
<cfscript>
border={"color":"blue","radius":6,"width":2};
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" border="#border#">
<cfchartseries >
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>Output
Using the crosshair attribute
<cfscript>
crosshair={"line-color":"green","line-style":"dashed","alpha"=1};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" crosshair="#crosshair#">
<cfchartseries type="bar" 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="bar" 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
Using the fill attribute
<cfscript>
fill={"angle":45,"background-color-1":"gray","background-color-2":"yellow"};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" fill="#fill#">
<cfchartseries type="bar" 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="bar" 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
Using the labels attribute
<cfscript>
labels=[{"text":"Sample comparison line chart","font-family":"Verdana","font-size":18}];
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" labels="#labels#">
<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
Using the legend attribute
<cfscript>
legend={"background-color":"lightgray"};
</cfscript>
<cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" legend="#legend#">
<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
Using the plot attribute
<cfscript>
plot={"rules":[
{
"rule":"%v<700000",
"background-color":"green" // set a rule that all values less than 700000
}, // are shown as green colored bars in the graph
{
"rule":"%v>700000", // set a rule that all values more than 700000
"background-color":"red" // are shown as green colored bars in the graph
}
]};
</cfscript>
<cfchart
format="html"
scalefrom="0"
scaleto="1200000"
showlegend="false"
chartheight="400"
chartwidth="600"
plot="#plot#"
title="Website Traffic 2016">
<cfchartseries type="bar">
<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
Using the preview attribute
<cfscript>
n=200;
preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"3"}; //preview struct
myarray=[];
for (i=1;i<=n;i++){
myarray[i]=randrange(1,n);
}
strengtharray=[];
for (i=1;i<=n;i++){
strengtharray[i]=randrange(15,25);
}
myquery=QueryNew("points,data,strength","integer,integer,integer");
for (i=1;i<=arraylen(myarray);i++){
queryAddRow(myquery);
querySetCell(myquery,"points",myarray[i]);
querySetCell(myquery,"data",i);
querySetCell(myquery,"strength",strengtharray[i]);
}
cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="400",chartwidth="600",
preview="#preview#") {
cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
zcolumn="strength");
}
</cfscript>Output
Using the seriesPlacement attribute
<cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" seriesPlacement="stacked">
<cfchartseries type="bar" 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="bar" 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
Using the scales attribute
Example 1
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart" scales="x,y">
<cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red" scales="x2,y2">
<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
Example 2
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart" scales="x,y">
<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" scales="x2,y2">
<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
Using the xAxis attribute
<cfscript>
n=200;
preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct
xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};
myarray=[];
for (i=1;i<=n;i++){
myarray[i]=randrange(1,n);
}
strengtharray=[];
for (i=1;i<=n;i++){
strengtharray[i]=randrange(15,25);
}
myquery=QueryNew("points,data,strength","integer,integer,integer");
for (i=1;i<=arraylen(myarray);i++){
queryAddRow(myquery);
querySetCell(myquery,"points",myarray[i]);
querySetCell(myquery,"data",i);
querySetCell(myquery,"strength",strengtharray[i]);
}
cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",
preview="#preview#",xaxis="#xaxis#") {
cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
zcolumn="strength");
}
</cfscript>Using the zoom attribute
<cfscript>
n=200;
preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct
xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};
zoom={"alpha":"0.3","border-color":"black","border-width":4,"background-color":"gray","label":{"border-color":"red","border-width":2,"font-size":10}};
myarray=[];
for (i=1;i<=n;i++){
myarray[i]=randrange(1,n);
}
strengtharray=[];
for (i=1;i<=n;i++){
strengtharray[i]=randrange(15,25);
}
myquery=QueryNew("points,data,strength","integer,integer,integer");
for (i=1;i<=arraylen(myarray);i++){
queryAddRow(myquery);
querySetCell(myquery,"points",myarray[i]);
querySetCell(myquery,"data",i);
querySetCell(myquery,"strength",strengtharray[i]);
}
cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",
preview="#preview#",xaxis="#xaxis#",zoom="#zoom#") {
cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
zcolumn="strength");
}
</cfscript>Using height, width, and percentage
Example 1- height=600 and width=600
<cfchart type="bar" title="Sample two-series Line chart" height=600 width=800 plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
<cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
<cfchartdata item="Day 1" value="19.2"/>
<cfchartdata item="Day 2" value="15.2"/>
</cfchartseries>
<cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
<cfchartdata item="Day 1" value="39.2"/>
<cfchartdata item="Day 2" value="35.2"/>
</cfchartseries>
</cfchart>Example 2- height=50% and width=50%
<cfchart type="bar" title="Sample two-series Line chart" height=50% width=50% plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
<cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
<cfchartdata item="Day 1" value="19.2"/>
<cfchartdata item="Day 2" value="15.2"/>
</cfchartseries>
<cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
<cfchartdata item="Day 1" value="39.2"/>
<cfchartdata item="Day 2" value="35.2"/>
</cfchartseries>
</cfchart>Example 3- Example 3- x=0 y=35%
<cfchart type="bar" title="Sample two-series Line chart" x=0 y=35% plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
<cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
<cfchartdata item="Day 1" value="19.2"/>
<cfchartdata item="Day 2" value="15.2"/>
</cfchartseries>
<cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
<cfchartdata item="Day 1" value="39.2"/>
<cfchartdata item="Day 2" value="35.2"/>
</cfchartseries>
</cfchart>Using the bevel attribute
Bevel in charts is a 3D-like raised effect applied to chart elements such as bars and pie slices to enhance visual depth. This effect gives the elements an embossed-like look, making them stand out more prominently.
Bevel is a struct of keys related to bevel such as:
- color: Defines the color of the bevel.
- blur-x: Defines the sharpness/smoothness of the bevel edges in the x-direction.
- blur-y: Defines the sharpness/smoothness of the bevel edges in the y-direction.
- angle: Defines the angle of the bevel.
- distance: Distance in # | #px indicating the distance from the object the bevel should be displayed.
<cfquery name="empQuery" datasource="cfdocexamples">
SELECT * FROM EMPLOYEE ORDER BY SALARY DESC
FETCH FIRST 10 ROWS ONLY
</cfquery>
<cfscript>
bevel={
"blur-x"=5,
"blur-y"=6,
"angle"=45,
"distance"=5
}
scaley={"min-value"="0","max-value"="15000"}
</cfscript>
<cfchart format="html" type="hbar" query="empQuery" height="600" width="800" showLegend="FALSE" xaxis="#scaley#" title="Employee salary" xaxistitle="Lastname" yaxistitle="Salary">
<cfchartseries itemcolumn="LASTNAME" valuecolumn="SALARY" bevel="#bevel#" color="green">
</cfchart>Using the axis attribute
Enhance the readability and presentation of charts by customizing the x-axis and y-axis attributes. This customization is achieved using the xAxis and yAxis attributes within the cfchart tag.
The xAxis and yAxis attributes accept JSON-formatted strings that define various styling options for the respective axes. These options include formatting, labeling, guiding lines, and zooming capabilities.
<cfscript>
xAxis={"label"={"text":"Monthly temperature in Chartville","color"="##3a5551"}}
</cfscript>
<cfchartset format="html" layout="vertical" height="800" width="1000">
<cfchart format = "html" type = "curve" markersize="5" xAxis="#xAxis#">
<cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white" color="##3a5551">
<cfchartdata item="Jan" value="5">
<cfchartdata item="Feb" value="70">
<cfchartdata item="Mar" value="10">
<cfchartdata item="Apr" value="40">
<cfchartdata item="May" value="18">
<cfchartdata item="Jun" value="22">
</cfchartseries>
</cfchart>
<cfchart format = "html" type = "bar" xAxis="#xAxis#">
<cfchartseries label="Temperature(°C) - Monthly" seriescolor="##3a5551">
<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">
</cfchartseries>
</cfchart>
</cfchartset>
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
|
