ChartAnnotationProps

Represents an annotation element displayed on the chart.

Props

The following table outlines the props for the ChartAnnotationProps:

NameTypeDefaultDescription
accessibility
ChartAccessibilityProps
{ ariaLabel: null, role: 'img', focusable: true, tabIndex: 0 }

Enhances accessibility for annotation elements to ensure compatibility with assistive technologies, such as screen readers and keyboard navigation.

content
string
null

Content of the annotation. Accepts HTML string, plain text, or DOM element ID.

coordinateUnit
AnnotationCoordinateUnit
'Point'

Defines whether position values are axis-based ('Point') or pixel-based ('Pixel').

hAlign
HorizontalAlignment
'Center'

Horizontal alignment relative to the X-position. Available Options:

  • Right: Aligns the annotation to the right of its anchor/target.
  • Center: Centers the annotation horizontally on its anchor/target.
  • Left: Aligns the annotation to the left of its anchor/target.
vAlign
VerticalAlignment
'Center'

Vertical alignment relative to the Y-position. Available options :

  • Top: Aligns the annotation above its anchor/target.
  • Center: Vertically centers the annotation on its anchor/target.
  • Bottom: Aligns the annotation below its anchor/target.
x
string | Date | number
null

X-axis position of the annotation.

  • When coordinateUnit is 'Pixel', specify offset in pixels.
  • When coordinateUnit is 'Point', specify the axis value.
xAxisName
string | null
null

Name of the X-axis to bind when coordinateUnit is 'Point'.

y
string | number
null

Y-axis position of the annotation.

  • When coordinateUnit is 'Pixel', specify offset in pixels.
  • When coordinateUnit is 'Point', specify the axis value.
yAxisName
string | null
null

Name of the Y-axis to bind when coordinateUnit is 'Point'.