All
API
Docs
Demos
Blogs
Webinars

Advanced Annotation Styles

Click any annotation to view its source code.

Click the buttons on interactive annotations to explore various user actions. 

Click an annotation

A beautiful and intuitive annotation design will not only look great in your application, but also help chart users learn the user interface so they can quickly start using the chart and sharing their insights.

Styling the annotation body

The body is the main part of the annotation that can display information, images or user controls. You can modify it in the Annotation API to set custom dimensions, fill colour or borders, and also add labels and glyphs.

Labels and glyphs

The t array for labels and g array for glyphs can be used to add any number of labels and glyphs with text, images and font icons. Labels and glyphs on annotations behave the same way as labels and glyphs on nodes, so you can get even more design inspiration in our Advanced Node Styles demo.

Custom interactions

Labels and glyphs can also serve as UI elements such as buttons, icons or toggles. Use pointer events and hover events to respond to user actions and add interaction styling.

To learn how to create user-editable text fields and other custom elements using HTML overlay, see the User-Created Annotations demo.

Key functions used: