Whatever message this page gives is out now! Go check it out!
Markers in ColdFusion charts
Last update:
May 18, 2026
Markers highlight specific data points on a chart. Markers are visual indicators to help users identify trends or key values on the chart. As a chart creator or developer using ColdFusion, here’s why markers are a key component in your charting journey:
- Markers draw attention to key data points on the chart, allowing users to identify trends.
- Markers can help interpret information on charts using two or more data sources.
- Markers can highlight anomalies or outliers so users can report insights more granularly.
- Markers can enhance the readability of a chart with many data points.
Using the cfchart and cfchartseries tags, you can add markers to scatter plots, line charts, bar charts, area charts, and more.
Note:
ColdFusion only supports area and line markers.
Customization options
ColdFusion provides extensive customization options for markers, including:
- Shape: Circle, square, triangle, and more.
- Size: Adjust the size of the marker to make it prominent on a chart.
- Color: Change the color of the marker to make it more distinct.
- Transparency: Adjust the transparency of the marker by assigning a value from 0-1.
- ..and more. View the section Marker properties for more information.
Example code to get started
Here are two basic examples of how to add markers on a line chart in ColdFusion:
Example 1- Apply line marker
The sample code:
- Defines the marker of type line on the Y-axis.
- Sets the marker at the value 80 on the Y-axis.
- Defines the appearance of the marker, using the properties, lineColor, lineWidth, lineStyle, and alpha.
- Adds a text label for the marker on a white background.
- Uses the data set by the cfchartdata tag.
<cfscript>
markers={
"yaxis" = [
{
"type" = "line",
"range" = [80],
"lineColor"= "red",
"lineWidth"= 2,
"lineStyle"="solid",
"alpha"="0.8",
"label"={
"text"="Safe level, defined by Org.",
"backgroundColor"= "white",
"offsetX"=180,
"offsetY"=-10
}
}
]
}
</cfscript>
<cfchart format="html" type = "line" showMarkers = "true" markers="#markers#" showLegend="false"
height="600"
width="800"
title="Average atmospheric level" >
<cfchartseries>
<cfchartdata item = "2013" value = 23>
<cfchartdata item = "2014" value = 93>
<cfchartdata item = "2015" value = 34>
<cfchartdata item = "2016" value = 72>
<cfchartdata item = "2017" value = 96>
<cfchartdata item = "2018" value = 33>
<cfchartdata item = "2019" value = 32>
<cfchartdata item = "2020" value = 27>
<cfchartdata item = "2021" value = 38>
<cfchartdata item = "2022" value = 49>
<cfchartdata item = "2023" value = 75>
<cfchartdata item = "2024" value = 74>
</cfchartseries>
</cfchart>Output
Example 2- Apply area marker
The sample code:
- Defines the marker of type area on the Y-axis.
- Sets the marker at the range of values 0-20 on the Y-axis.
- Defines the transparency of the marker.
- Adds a text label for the marker on a white background.
- Uses the data set by the cfchartdata tag.
<cfscript>
markers={
"plot"={
"type" = "circle",
"borderColor"="red",
"borderWidth"="2",
"size"=7,
"borderAlpha"=0.7,
"shadow"="true",
"shadowColor"="black",
"shadowAngle"=240,
"shadowBlur"=0.7,
"shadowDistance"=10,
"shadowAlpha"=1
},
"yaxis" = [
{
"type"="area",
"range"=[0,20],
"alpha"="0.8",
"label"={
"text"="Inactive level",
"backgroundColor"= "white"
}
}
]
}
</cfscript>
<cfchart format="html" type = "area" showMarkers = "true" markers="#markers#"
showLegend="false"
height="600"
width="800"
title="Average atmospheric level" >
<cfchartseries>
<cfchartdata item = "2013" value = 23>
<cfchartdata item = "2014" value = 93>
<cfchartdata item = "2015" value = 34>
<cfchartdata item = "2016" value = 72>
<cfchartdata item = "2017" value = 96>
<cfchartdata item = "2018" value = 33>
<cfchartdata item = "2019" value = 32>
<cfchartdata item = "2020" value = 27>
<cfchartdata item = "2021" value = 38>
<cfchartdata item = "2022" value = 49>
<cfchartdata item = "2023" value = 75>
<cfchartdata item = "2024" value = 74>
</cfchartseries>
</cfchart>Output
Example 3
The following script uses markers to set yAxis, scaleR, and other properties .
<cfscript>
markers={
"plot" =
{
"type" = "triangle",
"borderColor"="red",
"borderWidth"="4",
"size"=7,
"borderAlpha"=0.7
},
"yaxis" = [
{"type" = "line",
"range" = [30],
"lineColor"= "red",
"lineWidth"= 2,
"lineStyle"="solid",
"alpha"="0.8",
"label"= {
"text"= "Test Label for Marker for bar chart"}},
{
"type" = "area",
"range" = [20, 60],
"valueRange"= "true",
"backgroundColor"= "red"}
],
"scaleR" = [
{
"type": "area",
"range": [30, 40],
"alpha": 0.5,
"backgroundColor": "##ff4d4d",
"borderColor": "black",
"borderWidth": 7,
"offsetEnd": 1,
"offsetStart": 0
},
{
"type" = "line",
"range" = [30,40],
"lineColor"= "red",
"lineWidth"= 5,
"lineStyle"="dashdot",
"alpha"="0.8",
"label"= {
"text"= "Test Label for Marker in markers struct"
}
}
]}
scaleR=
{"markers"= [
{
"type": "area",
"range": [20, 30],
"alpha": 1,
"backgroundColor": "##ff4d4d",
"borderColor": "black",
"borderWidth": 3,
"offsetEnd": 0.6,
"offsetStart": 0.8
},
{
"type" = "line",
"range" = [30],
"lineColor"= "red",
"lineWidth"= 2,
"lineStyle"="solid",
"alpha"="0.8",
"label"= {
"text"= "Test Label for Marker in scaleR separately"
}
}
]
}
</cfscript>
<cfchartset format="html" layout="2x3" height="800" width="1400">
<cfchart type = "bar" showMarkers = "true" markers="#markers#" >
<cfchartseries >
<cfchartdata item = "2015" value = 20>
<cfchartdata item = "2016" value = 40>
<cfchartdata item = "2017" value = 60>
<cfchartdata item = "2018" value = 80>
</cfchartseries>
</cfchart>
<cfchart type = "gauge" scaleR="#scaleR#">
<cfchartseries >
<cfchartdata item = "2015" value = 20>
<cfchartdata item = "2016" value = 40>
<cfchartdata item = "2017" value = 60>
<cfchartdata item = "2018" value = 80>
</cfchartseries>
</cfchart>
<cfchart type = "gauge" markers="#markers#">
<cfchartseries >
<cfchartdata item = "2015" value = 20>
<cfchartdata item = "2016" value = 40>
<cfchartdata item = "2017" value = 60>
<cfchartdata item = "2018" value = 80>
</cfchartseries>
</cfchart>
<cfchart type="line" markers="#markers#" showMarkers ="true">
<cfchartseries>
<cfchartdata item = "2015" value = 20>
<cfchartdata item = "2016" value = 40>
<cfchartdata item = "2017" value = 60>
<cfchartdata item = "2018" value = 80>
</cfchartseries>
</cfchart>
</cfchartset>Output
Marker properties
Customize markers with different shapes (circle, square, diamond, etc.), sizes, colors, and borders . They can also display labels, tooltips, or animations to provide additional context.
Styling Options | Attributes | Possible Values |
Common | type | line, area |
range | indexes or values | |
alpha | 0 to 1 | |
label | ||
valueRange | true/false | |
backgroundColor/background-color | ||
backgroundColor1/background-color-1 | ||
backgroundColor2/background-color-2 | ||
border | format:- [top right bottom left] | |
borderAlpha/border-alpha | 0 to 1 | |
borderColor/border-color | color name or code | |
borderRadius | default-0,possible-negative and positive | |
borderRadiusBottomLeft | default-0,possible-negative and positive | |
borderRadiusBottomRight | default-0,possible-negative and positive | |
borderRadiusTopLeft | default-0,possible-negative and positive | |
borderRadiusTopRight | default-0,possible-negative and positive | |
borderWidth/border-width | default-0 | |
fillAngle | default-90 | |
fillOffsetX | default-0 | |
fillOffsetY | default-0 | |
fillType | default-linear, possible linear,none,radial | |
gradientColors | ||
gradientStops | ||
placement | top,bottom, default-bottom | |
shadow | Default Value: false | |
shadowAlpha | Default Value: 0.75 | |
shadowAngle | Default Value: 45 | |
shadowBlur | Default Value: 0 | |
shadowColor | Default Value: '#999' | |
shadowDistance | Default Value: 2 | |
label | labelAlignment/label-alignment | normal/opposite/auto |
labelPlacement/label-placement | normal/opposite | |
labelTolerance/label-tolerance | ||
textAlign/text-align | center,bottom,middle,right | |
textAlpha/text-alpha | 0 to 1 | |
overlap | true/false | |
text | any string | |
padding | for ex:- [10,4,20,30]- top,right,bottom,left respectively | |
paddingLeft/padding-left | default-value : 2 , possible values:- number | |
paddingRight/padding-right | default-value : 2 , possible values:- number | |
textDecoration/text-decoration | ||
underline | ||
url | ||
bold | true/false | |
verticalAlign/vertical-align | top,middle.bottom | |
visible | true/false | |
rtl | true/false | |
fontColor/font-color | ||
fontFamily/font-family | ||
fontSize/font-size | ||
fontSize/font-size | ||
line marker specific | lineColor/line-color | |
lineGapSize/line-gap-size(works with this lineSegmentSize line-segment-size) | ||
lineStyle/line-style | dashdot, dashed, dotted, solid | |
lineWidth/line-width | ||
offsetX/offset-x | ||
offsetY/offset-y | ||
offsetEnd | ||
offsetStart | ||
area markers specific | type | |
range | ||
alpha | ||
label | ||
valueRange | ||
backgroundColor/background-color | ||
backgroundColor1/background-color-1 | ||
backgroundColor2/background-color-2 | ||
border | ||
borderAlpha/border-alpha | ||
borderColor/border-color | ||
borderWidth/border-width | ||
fillAngle | ||
fillOffsetX | ||
fillOffsetY | ||
fillType | ||
gradientColors | ||
gradientStops | ||
placement |
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
|
