Annotations

This topic provides conceptual information about the annotations and overlay interactions available on the Ignite UI for Angular category chart component.

Demo

View on StackBlitz

Crosshair Layer

The Crosshair Layer of the category chart provides crossing lines that meet at the actual value of every targeted series. Crosshair types include: Horizontal, Vertical, and Both. The Crosshairs can also be configured to snap to data points by setting the CrosshairsSnapToData property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.

<igx-category-chart
    [dataSource]="data"
    crosshairsDisplayMode="Horizontal"
    crosshairsSnapToData="true"
    crosshairsAnnotationEnabled="true">
</igx-category-chart>

Final Value Layer

The Final Value Layer of the category chart component provides a quick view along the axis of the ending value displayed in a series.

<igx-category-chart
    [dataSource]="data"
    finalValueAnnotationsVisible="true">
</igx-category-chart>

Callout Layer

The Callout Layer of the category chart component displays a text callout at X/Y positions given in the data.

<igx-category-chart
    [dataSource]="data"
    calloutsVisible="true"
    [calloutsDataSource]="calloutData"
    calloutsXMemberPath="index"
    calloutsYMemberPath="yValue"
    calloutsLabelMemberPath="title">
</igx-category-chart>