import { ChartAnnotations } from "@elabs-ai/components-charts";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-chartsPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui ChartAnnotations chart (from @elabs-ai/components-charts) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look ChartAnnotations up before writing code: `npx -y @elabs-ai/components-cli docs ChartAnnotations` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Bikes Recipe From Spec
The same recipe from `ChartSpec.annotations`, rendered by `AutoChart`.
Desktop Only Note
`showAt={{ base: true, narrow: false }}`: gone at narrow (no marker, no key row), still described.
Ranges And Lines
A striped x range, a dashed y line and a dotted x line — every range and line in the furniture ink.
Row Notes
Row notes on a horizontal bar chart follow their category through a re-sort. The value axis of a horizontal chart is `x`, so the Goal line takes `x`.
Dumbbell Row Notes
Row notes on a `DumbbellChart`: the Coimbra note follows its row through the `delta` sort (Coimbra sorts second), the target band sits behind the tracks and the dashed average line over them.
Dumbbell From Spec
The same dumbbell from `ChartSpec.annotations`, rendered by `AutoChart`.
Waterfall Notes
A `WaterfallChart` hands its annotations to the inner bar chart: a row note, a note, a line.
API
ChartAnnotations
| Prop | Type | Description |
|---|---|---|
annotationsrequired | readonly ChartAnnotation[] | The annotations, in reading order (the narrow key numbers them in this order). |
layer | ChartAnnotationsLayer | `back` paints ranges (behind the marks), `front` paints lines, rows, notes and narrow markers (over the marks), `all` paints both in place. A chart shell that finds this layer among its children paints it twice, `back` first and `front` over the series, so a consumer never sets this. |
yAxisId | string | number | Value axis the `y` positions resolve against. Default: the primary axis. |