# antuikit / Recharts Palettes

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

## Install

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

## Import

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

## Demos

- [Palette](https://ui.antuikit.com/embed/recharts-palettes/palette.md): Set `palette` to `mono` for shades of one color, `accent` for one color and grays, or `multi` for a color per series.
- [Emphasis](https://ui.antuikit.com/embed/recharts-palettes/emphasis.md): Set `emphasis` to `strong` to draw every series one step darker, for small marks or a busy page.
- [Base color](https://ui.antuikit.com/embed/recharts-palettes/base-color.md): Pass `color` to build `mono` and `accent` from another color, here the emerald palette instead of the primary color.
- [Chart and legend](https://ui.antuikit.com/embed/recharts-palettes/legend.md): Wrap a card in `ChartPalette` so the chart and the legend beside it, which reads `chartColors.series`, use the same palette.

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