# antuikit / Recharts Annotations

> A responsive frame for one Recharts chart that paints its grid, axes, cursor and labels with the theme's chart colors and exposes each series color as `var(--series-<key>)`.

Docs: https://antuikit.com/docs/components/recharts-annotations

## Install

npx antuikit@latest init
npx antuikit@latest add recharts-chart

## Import

import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, chartColors } from "@/components/ui/recharts-chart";

## Demos

- [Reference line](https://ui.antuikit.com/embed/recharts-annotations/reference-line.md): `ReferenceLine` with `x` draws a vertical marker, with `y` a horizontal goal, and with `segment` a line between two data points.
- [Reference line position](https://ui.antuikit.com/embed/recharts-annotations/reference-line-position.md): Set `position` on a `ReferenceLine` to place it at the start, middle or end of a category band on a bar chart.
- [Reference dot](https://ui.antuikit.com/embed/recharts-annotations/reference-dot.md): A `ReferenceDot` marks one point in data coordinates, here the mean height and weight of a scatter of students.
- [Reference area](https://ui.antuikit.com/embed/recharts-annotations/reference-area.md): `ReferenceArea` shades the rectangle between `x1`, `x2`, `y1` and `y2`, here a band where two scatter series overlap.
- [Label positions](https://ui.antuikit.com/embed/recharts-annotations/label-positions.md): Every `position` a `Label` takes on a cartesian chart, inside and outside the plot area outlined with `usePlotArea`.
- [Multiple X axes](https://ui.antuikit.com/embed/recharts-annotations/multiple-x-axes.md): Four `XAxis` elements with their own `xAxisId`, two of them `mirror`ed, and a tooltip that snaps to one through `axisId`.
- [Automatic axis height](https://ui.antuikit.com/embed/recharts-annotations/x-axis-auto-height.md): Long rotated ticks are cut off at the default `XAxis` height, while `height="auto"` measures them and grows the axis to fit.
- [Pointer crosshair](https://ui.antuikit.com/embed/recharts-annotations/crosshair.md): `getRelativeCoordinate` turns a mouse or touch event into chart pixels, drawn as a dashed `Cross` with its coordinates.
- [Snap to data](https://ui.antuikit.com/embed/recharts-annotations/data-snap.md): `useXAxisInverseDataSnapScale` and its Y twin turn the pointer position into the nearest data values, shown as two reference lines.
- [Shadow DOM](https://ui.antuikit.com/embed/recharts-annotations/shadow-dom.md): A `PieChart` rendered into a shadow root through a portal, with every color passed on the marks since page styles stop at the root.
- [Layering with zIndex](https://ui.antuikit.com/embed/recharts-annotations/z-index.md): A metro map drawn with three `Line` series, where `zIndex` on each `ReferenceDot` puts interchanges behind the stations and airport links on top.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/recharts-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.