# antuikit / TanStack Polar

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

## Install

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

## Import

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

## Demos

- [Line](https://ui.antuikit.com/embed/tanstack-polar/line.md): Map the day of the year to `angle` and a value to `radius` in a `radialLine` to follow a yearly cycle around a circle.
- [Scatter](https://ui.antuikit.com/embed/tanstack-polar/scatter.md): Plot `radialDot` marks with a direction on `angle` and a speed on `radius` to show where observations cluster.
- [Rose](https://ui.antuikit.com/embed/tanstack-polar/rose.md): Use `radialBarRadius` on a band `angle` scale to give each category an equal slice whose length shows its value.
- [Radial bars](https://ui.antuikit.com/embed/tanstack-polar/radial-bars.md): Use `radialBarAngle` with a band `radius` scale and `cornerRadius: "full"` to draw rounded bars as concentric rings.

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