Web Components Chart Annotations

    The Web Components chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. These layers are dependent on the cursor position. Each of these annotation layers provides a different hover interaction that may be used individually or combined with others to provide powerful hover interactions.

    Web Components Annotations Example

    The following example demonstrates the annotation layers that are available on the Web Components chart. Click on the checkboxes to turn each layer on and off.

    Like this sample? Get access to our complete Web Components toolkit and start building your own apps in minutes. Download it for free.

    Web Components Crosshair Layer

    The IgcCrosshairLayerComponent renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.

    Crosshair types include:

    • Horizontal
    • Vertical
    • Both

    The chart's 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.

    You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the targetSeries property.

    By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the brush property of the Crosshair Layer.

    The following example shows how to configure the crosshair layer but targeting a single series, setting the type to vertical and styling the brush color.

    Web Components Final Value Layer

    The IgcFinalValueLayerComponent of the IgcDataChartComponent control provides a quick view along the axis of the ending value displayed in a series.

    You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the targetSeries property.

    You can also customize this annotation by setting the following properties:

    • axisAnnotationBackground: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
    • axisAnnotationTextColor: This property is used to choose the brush for the annotation's text color.
    • axisAnnotationOutline: This property is used to choose the brush for the annotation's outline color.

    The following example demonstrates how to style the final value layer annotation by setting the properties listed above.

    <igc-category-chart
     id="chart"
     final-value-annotations-visible="true">
</igc-category-chart>

    Web Components Callout Layer

    The IgcCalloutLayerComponent displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.

    Use the callout annotations to display additional information, such as notes or specific details about data points, that you would like to point out to your users.

    You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the targetSeries property.

    You can also customize this annotation by setting the following properties:

    • calloutLeaderBrush: This property is used to choose the brush for the leader lines for the callouts for the layer.
    • calloutOutline: This property is used to choose the brush for the annotation's outline color.
    • calloutBackground: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
    • calloutTextColor: This property is used to choose the brush for the annotation's text color.
    • calloutStrokeThickness: This property is used to choose the thickness for the callout backing.
    • calloutCornerRadius: This property is used to curve the corners of the callouts.
    • allowedPositions: This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom

    The following example demonstrates how to style the callout layer annotations by setting the properties listed above:

    <igc-category-chart
     id="chart"
     width="800px"
     height="400px"
     callouts-visible="true">
</igc-category-chart>

    let chart = (document.getElementById("chart") as IgcCategoryChartComponent);

chart.dataSource = data;
chart.calloutsDataSource = categoryData;
chart.calloutsXMemberPath = "index";
chart.calloutsYMemberPath = "value";
chart.calloutsLabelMemberPath = "info";

    API References

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