By adding annotations with their thoughts, chart users can help explain the narratives in the charts and collaborate with other users. This demo shows how to create annotations with user-editable text fields.

An annotation created on an item is overlaid with a background label t, which is passed to the chart.labelPosition() function to get the view coordinates of the background label and its parent annotation.

The returned coordinates are used to position an HTML overlay that handles creating and editing of the annotation text.

In addition, KeyLines labels are also used to add interactive elements on the annotations themselves.

Key functions used:

• Annotations API
• chart.labelPosition
• chart.viewCoordinates