# antuikit / Recharts Pie

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

## 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-pie/responsive.md): Give `ChartContainer` a fixed height and the `PieChart` fills its width, with a `label` on each slice and colors from each row's `fill`.
- [Gaps and rounded corners](https://ui.antuikit.com/embed/recharts-pie/padding-angle.md): Set `paddingAngle` to open a gap between slices and `cornerRadius` to round their ends, on a thin ring drawn with `innerRadius`.
- [Half circle](https://ui.antuikit.com/embed/recharts-pie/half-circle.md): Set `startAngle` to 180 and `endAngle` to 0, and move `cy` to the bottom edge, to draw the pie as a half circle.
- [Two levels](https://ui.antuikit.com/embed/recharts-pie/two-level.md): Stack two `Pie` elements with different radii to show regions on the inside and the cities that make them up on an outer ring.
- [Label positions](https://ui.antuikit.com/embed/recharts-pie/label-positions.md): Add a `LabelList` with `position` set to `center`, `inside` or `outside` to place a label in the hole, on the slice or beside it.
- [Percent labels](https://ui.antuikit.com/embed/recharts-pie/percent-labels.md): Pass a function to `label` to print each slice's percent on it, and a `shape` that fades the other slices while one is hovered.
- [Slice colors](https://ui.antuikit.com/embed/recharts-pie/slice-shape.md): Return a `Sector` from `shape` to color each slice by index, one of them with a pattern fill, and color its outside `LabelList` to match.
- [Custom active shape](https://ui.antuikit.com/embed/recharts-pie/active-shape.md): Pass `activeShape` to draw the hovered slice with an outer ring, a leader line and its value and percent beside it.
- [Radial gradient](https://ui.antuikit.com/embed/recharts-pie/gradient.md): Fill each slice from a `shape` that draws a radial gradient from the center outward, and outlines the hovered slice with it.
- [Gauge with needle](https://ui.antuikit.com/embed/recharts-pie/needle.md): Draw a second half `Pie` over the first with an `activeShape` that renders a needle pointing at the active slice, like a gauge.
- [In a grid](https://ui.antuikit.com/embed/recharts-pie/grid.md): Place several `ChartContainer` elements in a CSS grid, spanning rows and columns, and each pie resizes to fill its cell.

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