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:
API References
The following is a list of API members mentioned in the above sections: