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 MarkerType 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 chartType is configurable in this sample by using the drop-downs as well.

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

The following is a list of API members mentioned in the above sections:

• markerBrushes
• markerOutlines
• MarkerType
• IgxCategoryChartComponent