Example of Annotation in Angular Chart Component

This sample illustrates speed data for the Interlagos circuit. In area-based series, data points can be annotated using symbols.

Speed Data Plot for Interlagos Circuit
Description

In this example, you can see how to render and configure the annotation feature in charts. An annotation can hold any HTML element as its content. In this example, an area chart depicting speed data for the Interlagos circuit has the circuit session data as its annotation content.

Tooltips are enabled in this example. To see a tooltip in action, hover over or tap on the chart.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use Annotation feature, we need to inject ChartAnnotationService into the @NgModule.providers section.

More information on the chart annotation can be found in this documentation section.