# antuikit / Recharts Radar

> 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-radar

## Install

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

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/recharts-radar/basic.md): Draw one `Radar` over a `PolarGrid`, with subjects on the `PolarAngleAxis` and scores on the `PolarRadiusAxis`.
- [Fixed domain](https://ui.antuikit.com/embed/recharts-radar/domain.md): Set `domain` on `PolarRadiusAxis` to fix the scale at 0 to 150, and tilt its labels with `angle`, to compare two students fairly.
- [Range animation](https://ui.antuikit.com/embed/recharts-radar/range-animation.md): Give `Radar` a `[low, high]` range per subject and an `animationInterpolateFn` that grows the shape from the center when data changes.
- [Radial bar](https://ui.antuikit.com/embed/recharts-radar/radial-bar.md): A `RadialBarChart` bends one bar per row into a ring, with a `background` track and a label at the start of each bar.
- [Label positions](https://ui.antuikit.com/embed/recharts-radar/label-positions.md): Add a `LabelList` with `position` set to `insideStart`, `insideEnd` or `end` to place a label along a radial bar.
- [Click to focus](https://ui.antuikit.com/embed/recharts-radar/click-to-focus.md): Share a selection between a `RadialBar` `shape` and a custom `Legend` content, so a click on a ring or its name fades the others.

## 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-*)`.