# antuikit / TanStack Pie

> TanStack Charts' SVG chart with its tooltip, painted with the theme's chart colors, grid and axes, with labels sized from the theme.

Docs: https://antuikit.com/docs/components/tanstack-pie

## Install

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

## Import

import { chartColors, RendererChart } from "@/components/ui/tanstack-chart";

## Demos

- [Basic](https://ui.antuikit.com/embed/tanstack-pie/simple.md): Pass the rows through `pie` and draw them with `radialArc` inside `polar` to split a whole into slices, one per browser.
- [No separator](https://ui.antuikit.com/embed/tanstack-pie/no-separator.md): Leave out `stroke` and `strokeWidth` on `radialArc` so the slices meet edge to edge with no gap between them.
- [Labels](https://ui.antuikit.com/embed/tanstack-pie/label.md): Add a `radialRule` leader line and a `radialText` with `anchor` set to `outside` to print each slice's value beside it.
- [Labels without leaders](https://ui.antuikit.com/embed/tanstack-pie/label-outside.md): Use `radialText` alone with a `radiusOffset` to place each value just outside its slice, with no line connecting them.
- [Labels inside](https://ui.antuikit.com/embed/tanstack-pie/label-inside.md): Set the `radialText` `radius` below 1 and `anchor` to `middle` to write each browser's name inside its own slice.
- [Legend](https://ui.antuikit.com/embed/tanstack-pie/legend.md): Give the `color` scale a `colorLegend` with `colorLegendItems` to draw a row of colored swatches and names under the pie.
- [Donut](https://ui.antuikit.com/embed/tanstack-pie/donut.md): Set `innerRadius` on `radialArc` to cut a hole in the middle and turn the pie into a donut.
- [Active slice](https://ui.antuikit.com/embed/tanstack-pie/donut-active.md): Draw a second `radialArc` for one slice with a larger `outerRadius` to pull the top browser out of the ring.
- [Donut with total](https://ui.antuikit.com/embed/tanstack-pie/donut-text.md): Place two `radialText` marks at the center, at angle and radius zero, to show the total and its label inside the hole.
- [Stacked rings](https://ui.antuikit.com/embed/tanstack-pie/stacked.md): Give two `radialArc` marks different `innerRadius` and `outerRadius` values to compare desktop and mobile months in one chart.
- [Selected month](https://ui.antuikit.com/embed/tanstack-pie/interactive.md): Rebuild the definition when a `Select` changes to pull out the chosen month, add a ring around it and print its value.
- [Full pie](https://ui.antuikit.com/embed/tanstack-pie/letters.md): Use `pie` with its default angles and a tooltip `format` to compare how often the four most common English letters appear.
- [Named slices](https://ui.antuikit.com/embed/tanstack-pie/letters-labeled.md): Set `color` on `radialText` to the slice field so each letter's label beside the pie takes the color of its slice.
- [Proportional hole](https://ui.antuikit.com/embed/tanstack-pie/letters-donut.md): Pass `innerRadius` a function of `radius` so the donut's hole stays the same share of the chart at any size.
- [Combined share](https://ui.antuikit.com/embed/tanstack-pie/donut-total.md): Sum the rows and print the result with a centered `radialText` to show the share three letters take together.
- [Gaps and rounded ends](https://ui.antuikit.com/embed/tanstack-pie/rounded-donut.md): Set `gapAngle` on `pie` and `cornerRadius` on `radialArc` to space the slices apart and round their corners.
- [Nested rings](https://ui.antuikit.com/embed/tanstack-pie/nested.md): Draw packages in an inner `radialArc` and their modules in an outer one to show how each total breaks down.
- [Active metric](https://ui.antuikit.com/embed/tanstack-pie/active-metric.md): Set the selection from `onFocusChange` or a vertical `Segmented` to pull out one browser and show its visitors in the center.

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