Annotations Basics

Click any annotation to view its source code.

Pan and zoom the chart and drag the nodes to see how annotations respond to changes.

Click an annotation

KeyLines annotations are a special type of a chart item that annotates the nodes, links and open and closed combos contained in its subject array.

Annotations are positioned relative to their subjects at a distance set by the position property. When a layout is run or when their subjects move, annotations also move to keep their relative position. They do not scale during zooming.

Annotations have two main parts - a body to show information, styling elements or user controls and a connector to link the annotation to its subjects. You can see more advanced examples of body styling in the Advanced Annotation Styles demo.

The connector further splits into a line, a subject end decoration and a container around subjects, all of which can be styled or disabled in the connectorStyle property.

Key functions used: