Annotations in React Chart

Use the ChartAnnotation component to place custom content (text, HTML, or JSX) at specific data points or absolute pixel coordinates. Annotations are useful for highlighting peaks, dips, averages, or adding explanatory notes directly on the chart.

Overview

Add one or more ChartAnnotation elements inside a ChartAnnotationCollection Provide the content via content, choose the coordinateUnit (Point or Pixel), and position it with x and y. Use hAlign and vAlign to align the callout relative to its anchor.

Point

Use coordinateUnit="Point" to anchor an annotation to chart data. Specify x (X-axis value) and y (Y-axis value) in axis units so the annotation follows the data when panning or zooming and stays aligned with the corresponding value or point.

Pixel

Use coordinateUnit="Pixel" to place an annotation at an absolute position within the chart area. Set x and y as pixel values from the chart’s top-left corner—ideal for static labels, captions, or branded markers that are not tied to data values.

Alignment

Control how the annotation content is aligned relative to its anchor point using hAlign (Left, Center, Right) and vAlign (Top, Center, Bottom). This lets you position callouts to avoid overlap and keep labels readable around dense data points.