# antuikit / TanStack Radial

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

## Install

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

## Import

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

## Demos

- [Simple](https://ui.antuikit.com/embed/tanstack-radial/simple.md): Give `radialBarAngle` a band `radius` scale to draw one ring per browser, each over a full-turn track drawn by a second bar mark.
- [Grid](https://ui.antuikit.com/embed/tanstack-radial/grid.md): Pass `radialGrid` and `angleGrid` in the polar `guides` to draw circles and spokes behind the rings instead of a track.
- [Label](https://ui.antuikit.com/embed/tanstack-radial/label.md): Add a second `polar` with a `radialText` mark to write each browser's name at the start of its ring.
- [Shape](https://ui.antuikit.com/embed/tanstack-radial/shape.md): Lay a thick `radialBarAngle` with square ends over a thin `radialArc` ring, with the total written in the middle.
- [Text](https://ui.antuikit.com/embed/tanstack-radial/text.md): Set `cornerRadius` on a single `radialBarAngle` for a rounded progress arc, with the total and its label centered in the ring.
- [Stacked](https://ui.antuikit.com/embed/tanstack-radial/stacked.md): Pass `angle1` and `angle2` to place each channel's segment end to end along a half ring, with the combined total in the middle.
- [Gauge](https://ui.antuikit.com/embed/tanstack-radial/gauge.md): Use `pie` with a `startAngle` and `endAngle` three quarters of a turn apart to show the share of agreeing responses for the chosen question.
- [Needle gauge](https://ui.antuikit.com/embed/tanstack-radial/needle-gauge.md): Combine `radialArc` bands with `radialRule` ticks and a needle, a `radialDot` hub and `radialText` to read one county's unemployment rate.

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