Annotations

Add reference lines and areas to highlight thresholds, targets, safe ranges, or notable regions on your charts.

Reference Lines

Draw horizontal or vertical lines at specific values:

tsx

<LineChart
  data={data}
  series={[{ key: 'latency', label: 'Latency' }]}
  theme="midnight"
  annotations={[
    { type: 'line', value: 100, axis: 'y', label: 'Warning', color: '#f59e0b' },
    { type: 'line', value: 150, axis: 'y', label: 'Critical', color: '#ef4444' },
  ]}
/>

Reference Areas

Highlight ranges with filled areas:

tsx

<LineChart
  data={data}
  series={[{ key: 'latency', label: 'Latency' }]}
  theme="midnight"
  annotations={[
    { type: 'area', start: 0, end: 80, axis: 'y', color: '#22c55e', opacity: 0.1, label: 'Normal' },
    { type: 'area', start: 80, end: 120, axis: 'y', color: '#f59e0b', opacity: 0.1 },
    { type: 'area', start: 120, end: 200, axis: 'y', color: '#ef4444', opacity: 0.1, label: 'Critical' },
  ]}
/>

Lines + Areas

Combine lines and areas for comprehensive annotations:

Label Positioning

Control where labels appear with labelPosition:

Supported Charts

Annotations are supported in the following chart components:

LineChart - via annotations prop
BarChart - via annotations prop
ScatterChart - via annotations prop
ComboChart - via annotations prop

ReferenceLine Props

Prop	Type	Default	Description
`type*`	`"line"`	-	Annotation type
`value*`	`number`	-	Value on the axis
`axis*`	`"x" \| "y"`	-	Which axis to draw on
`color`	`string`	-	Line color (defaults to theme accent)
`strokeDasharray`	`string`	`"4,4"`	Line dash pattern
`strokeWidth`	`number`	`1`	Line width
`label`	`string`	-	Optional label text
`labelPosition`	`"start" \| "center" \| "end"`	`"start"`	Label position

ReferenceArea Props

Prop	Type	Default	Description
`type*`	`"area"`	-	Annotation type
`start*`	`number`	-	Start value
`end*`	`number`	-	End value
`axis*`	`"x" \| "y"`	-	Which axis to draw on
`color`	`string`	-	Fill color (defaults to theme accent)
`opacity`	`number`	`0.1`	Fill opacity
`label`	`string`	-	Optional label text