DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - Chart with Annotations

Annotations are containers for images, text blocks, and custom content that display additional information about the visualized data.

To create annotations, populate the Chart's annotations array. Each object in the array configures an individual annotation. To specify properties for all annotations, use the commonAnnotationSettings object. Individual settings take precedence over common settings.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
https://www.wikipedia.org/
Backend API

You can set each annotation's type property to "text", "image", or "custom". Depending on the type, specify the text or image property. You can also add a description that will be displayed in a tooltip.

Annotations can be unattached or anchored to a chart element. In this demo, all annotations are anchored to series points via the argument and series properties. Refer to the annotations description for more information on how to position annotations.