Overview – Markers in Chart

Markers are used to uniquely represent a particular dataSeries or dataPoint. Markers can appear in two different place – on charts and in legend. By default Markers are automatically enabled when number of dataPoints are less – automatically determined based on Chart Size. You can manually override the automatic enabling/disabling of markers by setting markerSize to a value equal to or greater than zero. Below we see an image representing markers in a chart.

  • Currently markers are supported in Line Charts, Area Charts, Scatter Charts and Bubble Charts only – not available in Column/Bar charts.
  • To disable marker use markerType as “none”.
CanvasJS HTML5 Chart Markers

Different Type of Markers

markerType property can have five possible values – “circle”, “square”, “triangle” ,”cross” & “none”. Below is an example showcasing the same.

Try it Yourself by Editing the Code below.

Styling Marker

Default markers can be overridden by setting marker properties. You can customize markers using the below properties/attributes.

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint markerType String “circle” “none”, “circle”, “square”, “cross”, “triangle”, “line”
dataSeries/ dataPoint markerColor String auto. takes dataSeries/dataPoint color “red”, “#DEB887”, rgb(255,0,0), …
dataSeries/ dataPoint markerSize Number auto. Zero for area chart 5, 10..
dataSeries/ dataPoint markerBorderColor String marker Color “red”, “#1E90FF”..
dataSeries/ dataPoint markerBorderThickness Number 1 4,6..
Try it Yourself by Editing the Code below.

Custom Marker for individual dataPoint

Certain times we may want a dataPoint to stand out from the rest. In these cases, you can override default marker behaviour only for that particular dataPoint as shown below.

Try it Yourself by Editing the Code below.

Styling Legend Markers

If you want a different set of marker in legend from those plotted on chart, you can use the following properties of dataSeries/dataPoint.

Applies To Attribute Type Default Examples
dataSeries/ dataPoint legendMarkerType String “circle” “none”, “circle”, “square”, “cross”, “triangle”
dataSeries/ dataPoint legendMarkerColor String marker Color “red”,”#1E90FF”..
dataSeries/ dataPoint legendMarkerBorderColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint legendMarkerBorderThickness Number 0 2, 4..

In the below code snippet, we will have different looking markers on dataSeries and inside legend. Though this is not recommended, we have provided the feature because of some special cases.

Try it Yourself by Editing the Code below.

Finishing it up.

Below is an example that uses all the above concepts.

Try it Yourself by Editing the Code below.

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

Comments 16

  1. Can I rotate a marker? For example, if I want to make a wind graph with ‘flags’ that show wind direction would it be possible using “rotate” in some way?

  2. Currently, the point markers disappear when the points reach a predetermined density. This is great. It would be very nice if this behavior would work the same way when zoomed. For example, if the user zooms below the trigger density then the point markers would reappear.

  3. Marker color examples above look like a copy-paste error.
    Can the legend markers inherit the markerBorder properties?

  4. Can I configure graph, for showing markers only when mouse over point on grpah line, and otherwise do not show any markers when mouse out of graph line?

  5. Hi, i have a chart with 2 custom markers a green for min and a red for max. The max can be seen easily , but the green is at the bottom of the chart and is almost invisible. Can you help me please.
    Here is a picture of my chart http://postimg.org/image/46ur05c4d/ .

    This is my configuration units,min and max are my variables. I tried changing includzero to true but it didnt work.

    axisY: {
    includeZero: false,
    title: units,
    viewportMinimum: min -2,
    viewportMaximum: max

  6. Hi here i am using line graph what i want is whether it is possible that single line graph can be drawn with 2 different colors like half of the graph is blue and remaining half red?

    • This feature is not available yet. But you can workaround this problem by drawing two different dataSeries side by side – multiseries chart.

  7. My markers are disappearing for no good reason in my real-time chart. It does not matter what I set markerSize to. The time the markers disappear depends on the width of your screen. On my desktop screen they disappear in about 45 seconds. On an iPad they disappear in about 25 seconds. You can witness this behavior by going to http://www.abacharts.com and clicking start and then click “response” and “reinforcer” a few times and just wait.

    It is very important that the markers stay on the chart ALWAYS for this project, otherwise the chart is useless. Is there any way to force this behavior? Thank you.

    • Shaun,

      I just looked into your code and it doesn’t seem like you are setting markerSize in reinforcer – you’ve only set markerType to cross. Unless the markerSize is set, chart tries to handle it by itself – showing markers when there are less number of dataPoints and removing them when there are large number of dataPoints.

      Here is a jsfiddle where we are setting markerSize and it works fine.

      • Thanks, I must have had a typo before in “markerSize” before because it wasn’t doing anything, so I took it out. Now it’s working!

  8. It seems makers only support “circle”, “square”, “triangle” ,”cross” & “none” as of now.
    Does the markers also support URL to any graphic, like attribute given on this form: “url(graphic.png)”?


  9. is there any way can i show marker of select data set on graph both on touch and desktop?

If you have any questions, please feel free to ask in our forums. Ask Question