Angular Chart Markers

In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart’s plot area. Markers help your end-users immediately identify a data point’s value even if the value falls between major or minor grid lines.

Angular Chart Marker Example

In the following example, the Line Chart is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the MarkerTypes property to Circle enum value.

The colors of the markers are also managed by setting the MarkerBrushes and MarkerOutlines properties in the sample below. The markers and CategoryChart.ChartType is configurable in this sample by using the drop-downs as well.

Angular Chart Marker Size

You can control the exact device-independent pixel dimensions of data point markers by setting the MarkerSize property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used.

By default, marker sizing is determined by the series marker template. When you set MarkerSize to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting MarkerSize back to NaN restores the default template-driven sizing.

The MarkerSize property is available on all series types that derive from MarkerSeries, including LineSeries, SplineSeries, AreaSeries, ColumnSeries, ScatterSeries, ScatterLineSeries, ScatterSplineSeries, and polar/radial series types.

The following code examples show how to set MarkerSize to 30 device-independent pixels on a ScatterLineSeries in the XamDataChart control:

To reset markers to their default template-driven size, set MarkerSize to NaN (or remove the attribute in markup):

The following sample demonstrates MarkerSize on scatter series with an interactive editor:

Angular Chart Checkmark Marker Type

The Ignite UI for Angular charts include a Checkmark option in the MarkerType enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.

You can apply the Checkmark marker type to an individual series by setting its MarkerType property to MarkerType.Checkmark. To use the checkmark shape for all series in the chart simultaneously, set the chart’s MarkerAutomaticBehavior property to MarkerAutomaticBehavior.Checkmark.

The SeriesViewer.CheckmarkMarkerTemplate property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.

Angular Chart Marker Templates

In addition to marker properties, you can implement your own marker by setting a function to the MarkerTemplate property of a series rendered in the CategoryChart control as it is demonstrated in example below.

Additional Resources

You can find more information about related chart features in these topics:

• Chart Annotations
• Chart Highlighting

API References