Axis Annotations

In the Ignite UI for Angular data chart component, you are able to add annotations to your axes to show particular values at different points on that axis. This can help you to visualize things such as final series values, overlay values, and values corresponding to crosshairs in the chart.

Demo

In the Ignite UI for Angular data chart, the following are the series and layers that support axis annotations:

You can enable the axis annotations by setting the isAxisAnnotationEnabled property of the corresponding layer or overlay to true. In doing so, this will place a box on the corresponding owning axis or axes with the value that that particular overlay or layer represents at the point that it is currently at. For example, with the IgxCrosshairLayerComponent, these annotations can appear on both the X and Y axes and will move around and change as you scroll around the plot area.

The isAxisAnnotationEnabled property does not exist on the IgxFinalValueLayerComponent, as this layer is an axis annotation in itself and has no other visualization other than the annotation on the axis.

You can customize the axis annotations in background, value precision, outline, padding, stroke (outline) thickness, and text color. These can be set using the axisAnnotationBackground, axisAnnotationInterpolatedValuePrecision, axisAnnotationOutline, axis annotation padding (axisAnnotationPaddingBottom,axisAnnotationPaddingLeft,axisAnnotationPaddingRight,axisAnnotationPaddingTop),

axisAnnotationStrokeThickness, and axisAnnotationTextColor properties, respectively. In addition to these properties, there is also an axisAnnotationFormatLabel event that you can use to fully customize what exactly is shown in IgxValueOverlayComponent axis annotations.

Note, the IgxCrosshairLayerComponent has the ability to show annotations on both the X and Y axis. These can be customized individually, and as such, each of the above properties exist, but with either an "xAxis" or a "yAxis" placed in front of the name. For example, xAxisAnnotationBackground or yAxisAnnotationTextColor. In addition XAxisAnnotationFormatLabel and YAxisAnnotationFormatLabel event that you can use to fully customize what exactly is shown in IgxCrosshairLayerComponent axis annotations.

Code Example

This code demonstrates how to create a Ignite UI for Angular data chart with each of the layers and the overlay with axis annotations enabled for each. In this case, the IgxFinalValueLayerComponent is also customized to have a yellow text color.

<igx-data-chart [dataSource]="data" width="100%" height="500px">
    <igx-category-x-axis #xAxis label="label"></igx-category-x-axis>
    <igx-numeric-y-axis #yAxis></igx-numeric-y-axis>

    <igx-column-series [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="value"></igx-column-series>

    <igx-value-overlay [axis]="yAxis" isAxisAnnotationEnabled=true thickness=3 value=85></igx-value-overlay>

    <igx-crosshair-layer isAxisAnnotationEnabled=true></igx-crosshair-layer>

    <igx-final-value-layer axisAnnotationTextColor="Yellow"></igx-final-value-layer>
</igx-data-chart>

Additional Resources