# antuikit / Recharts Hierarchies

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

## Install

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

## Import

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

## Demos

- [Treemap](https://ui.antuikit.com/embed/recharts-hierarchies/treemap.md): Give a `Treemap` nested data and a `dataKey`, and pass the theme's series colors as `colorPanel` to fill each top-level group.
- [Custom content](https://ui.antuikit.com/embed/recharts-hierarchies/custom-content.md): Pass a component as `content` to draw each `Treemap` node yourself, here a colored group with its name and rank.
- [Padding and gaps](https://ui.antuikit.com/embed/recharts-hierarchies/padding-and-gaps.md): Set `nodeInset` and `nodeGap` on a `Treemap` to pad each group and space its children apart.
- [Nested](https://ui.antuikit.com/embed/recharts-hierarchies/nested.md): Set `type` to `nest` so clicking a group zooms into its children, with a breadcrumb below the `Treemap` to step back up.
- [Bundle size treemap](https://ui.antuikit.com/embed/recharts-hierarchies/bundle-size-treemap.md): A nested `Treemap` of a code library's packages and classes, sized by bytes, with totals under it and a click to drill in.
- [Sunburst](https://ui.antuikit.com/embed/recharts-hierarchies/sunburst.md): A `SunburstChart` drawn over half a circle with `startAngle` and `endAngle`, each top folder colored by the `fill` on its row.
- [Theme colors](https://ui.antuikit.com/embed/recharts-hierarchies/theme-colors.md): Give each first ring row of a `SunburstChart` the next theme series color as `fill`, and its descendants inherit it.
- [Bundle size sunburst](https://ui.antuikit.com/embed/recharts-hierarchies/bundle-size-sunburst.md): The same package hierarchy as a `SunburstChart` with a wide ring, hidden value labels and a tooltip that reads sizes in KB.
- [Funnel](https://ui.antuikit.com/embed/recharts-hierarchies/funnel.md): A `Funnel` inside a `FunnelChart`, colored by the `fill` on each stage, with a `LabelList` naming the stages on the right.
- [Active shape](https://ui.antuikit.com/embed/recharts-hierarchies/active-shape.md): Pass `activeShape` to a reversed `Funnel` to redraw the hovered stage as an outlined `Trapezoid` labeled with its dimensions.
- [Funnel label positions](https://ui.antuikit.com/embed/recharts-hierarchies/funnel-label-positions.md): Every `position` a `LabelList` accepts on a `Funnel`, from `center` and `insideTopLeft` to a custom point.
- [Sankey custom node](https://ui.antuikit.com/embed/recharts-hierarchies/sankey-custom-node.md): Pass a component as `node` to a `Sankey` to draw each step as a bar with its name and total, flipping the text at the right edge.

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