# antuikit / TanStack Radar

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

## Install

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

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/tanstack-radar/basic.md): Wrap a `radialArea` in `polar` with a point scale on `angle` and a closed curve to draw one series as a filled shape.
- [Dots](https://ui.antuikit.com/embed/tanstack-radar/dots.md): Add a `radialDot` mark over the area, on the same `angle` and `radius` fields, to mark each month's value.
- [Multiple](https://ui.antuikit.com/embed/tanstack-radar/multiple.md): Stack two `radialArea` marks in one `polar` to compare two series on the same axes, the later one drawn on top.
- [Lines only](https://ui.antuikit.com/embed/tanstack-radar/lines-only.md): Set `fillOpacity` to 0 and widen `strokeWidth` to draw each series as an outline, so overlapping shapes stay readable.
- [Circle grid](https://ui.antuikit.com/embed/tanstack-radar/grid-circle.md): Set `shape: "circle"` on `radialGrid` to draw round rings instead of polygons behind the series.
- [Circle grid, no spokes](https://ui.antuikit.com/embed/tanstack-radar/grid-circle-no-lines.md): Give `angleGrid` a `stroke` of `"transparent"` to keep the month labels and drop the spokes between the rings.
- [Filled circle grid](https://ui.antuikit.com/embed/tanstack-radar/grid-circle-fill.md): Pass `fill` and `fillOpacity` to a circular `radialGrid` to tint the rings and drop their outlines.
- [Filled grid](https://ui.antuikit.com/embed/tanstack-radar/grid-fill.md): Pass `fill` and `fillOpacity` to a polygon `radialGrid` to tint the rings behind a borderless series.
- [Custom grid](https://ui.antuikit.com/embed/tanstack-radar/grid-custom.md): Give `radialGrid` a single entry in `values` to draw just one outer ring around the series.
- [No grid](https://ui.antuikit.com/embed/tanstack-radar/grid-none.md): Leave out `radialGrid` and hide the spokes to show only the shape, its dots and the month labels.
- [Radius axis](https://ui.antuikit.com/embed/tanstack-radar/radius-axis.md): Turn on `labels` in `radialGrid` and set `labelAngle` and `labelRotate` to print the ring values along one spoke.
- [Custom labels](https://ui.antuikit.com/embed/tanstack-radar/label-custom.md): Replace the month labels with two `radialText` marks outside the rings, one for both totals and one for the month.
- [Legend](https://ui.antuikit.com/embed/tanstack-radar/legend.md): Add a row of `Badge` dots under the chart, colored from `chartColors.series`, to name each series.
- [Legend with icons](https://ui.antuikit.com/embed/tanstack-radar/icons.md): Name each series with an `Icon` in its color instead of a dot, in a row under the chart.
- [Normalized profile](https://ui.antuikit.com/embed/tanstack-radar/athlete.md): Use `fold`, `normalize` and `select` to turn raw results in different units into one comparable profile on a 0 to 100 scale.
- [Comparison](https://ui.antuikit.com/embed/tanstack-radar/comparative.md): Set `color` on one `radialArea` to a group field to draw a translucent shape per country on the same normalized axes.

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