Chart annotationPro

Anomaly, event and note callouts pinned to points, with labels placed so none overlap each other or the line. A ready line chart, or a layer over any chart.

Markdown

On this page

ProOctober checkout errors with a deploy anomaly, a rollback, an issuer rule change and retry tuning, labels placed without overlap.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/chart-annotation

Usage

tsx

import { AnnotatedChart } from "@/components/ui/chatcn/pro/chart-annotation"

<AnnotatedChart
  data={daily}
  xKey="day"
  yKey="errors"
  annotations={[{ id: "deploy", x: "12 Oct", kind: "anomaly", title: "502s after deploy", detail }]}
/>

Each label tries above, below and beside its point and only moves further out, with a leader line, when it has to; higher priority callouts (anomalies, then events) keep the best slots. For another chart, render ChartAnnotationLayer over it with pixel anchors and the points as obstacles; placeLabels in chatcn-pro-data-a exposes the placement on its own.

Examples

States

ProSeven crowded callouts, narrow, loading, no data and error.

Props

Prop	Type	Notes
`data`, `xKey`, `yKey`	rows, `string`, `string`	The line
`annotations`	`{ id, x, kind?, title, detail?, priority? }[]`	Kinds: `anomaly`, `event`, `note`
`activeId`, `defaultActiveId`, `onActiveChange`	`string \| null`	The selected callout
`valueFormat`, `unit`, `height`, `title`, `description`		Chart options
`loading`, `error`, `onRetry`		Chart states

Keyboard

Key	Action
Tab	Moves to the callouts as one stop
Left and Right	Previous or next callout in time
Enter or Space	Selects or clears the callout
Escape	Clears the selection

Accessibility

Callouts are toggle buttons named by kind and title; the detail below is a polite live region.
Kinds differ by icon and shape (ring, rule, dot), not only by amber, blue and gray.
The chart image is labelled with every callout and its date.

Motion

Selecting a callout dims the rest over 150 ms. Placement is computed, not animated, so labels never drift.