User Guide Cancel

Markers in ColdFusion charts

 

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:

  1. Defines the marker of type line on the Y-axis.
  2. Sets the marker at the value 80 on the Y-axis.
  3. Defines the appearance of the marker, using the properties, lineColor, lineWidth, lineStyle, and alpha.
  4. Adds a text label for the marker on a white background.
  5. Uses the data set by the cfchartdata tag.
code

<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>
<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>
<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

A line chart using markers.
A line chart using markers.

Example 2- Apply area marker

The sample code:

  1. Defines the marker of type area on the Y-axis.
  2. Sets the marker at the range of values 0-20 on the Y-axis.
  3. Defines the transparency of the marker.
  4. Adds a text label for the marker on a white background.
  5. Uses the data set by the cfchartdata tag.
code

<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>
<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>
<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

An area chart using markers.
An area chart using markers.

Example 3

The following script uses markers to set yAxis, scaleR, and other properties.

code

<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>
<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>
<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 

 

 

Get help faster and easier

New user?