# antuikit / TanStack Distributions

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

## Install

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

## Import

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

## Demos

- [Histogram](https://ui.antuikit.com/embed/tanstack-distributions/histogram.md): Group the rows with `binX` and fixed `thresholds`, then draw each bin as a `rect` from zero to its count, here fuel economy in five mpg steps.
- [Cumulative histogram](https://ui.antuikit.com/embed/tanstack-distributions/cumulative.md): Run the bins through `cumulative` with a `sum` reducer so each bar counts every athlete at or under its weight.
- [Cumulative distribution](https://ui.antuikit.com/embed/tanstack-distributions/empirical-cdf.md): Use `rank` to give each car its share of the cars at or below it, drawn as a `lineY` with a step curve.
- [Box plot](https://ui.antuikit.com/embed/tanstack-distributions/boxplot.md): Pass raw rows to `boxY` to draw the quartiles, median, whiskers and outliers of each experiment without summarizing them first.
- [Violin](https://ui.antuikit.com/embed/tanstack-distributions/violin.md): Draw `violinY` from binned counts scaled to each species' maximum, with a `tickY` and a dot marking the median of each.
- [Ridgeline](https://ui.antuikit.com/embed/tanstack-distributions/ridgeline.md): Stack one smoothed distribution per season with `ridgelineY`, letting `overlap` push each ridge into the row above it.
- [Beeswarm](https://ui.antuikit.com/embed/tanstack-distributions/beeswarm.md): Give `dot` a `dodgeY` layout to push overlapping points apart, so every car shows along one fuel economy axis.
- [Error bars](https://ui.antuikit.com/embed/tanstack-distributions/error-bars.md): Reduce each species to its mean and standard deviation with `groupBy`, then draw the range with `link` and two `tickY` caps.
- [Faceted histograms](https://ui.antuikit.com/embed/tanstack-distributions/faceted.md): Wrap a histogram in `facet` with `columns` set to 1 to stack one panel per species on the same body mass and share scales.
- [Waffle](https://ui.antuikit.com/embed/tanstack-distributions/waffle.md): Give `waffleY` a `unit` of 0.01 to split a hundred cells between the letters, so each cell stands for one percentage point of English text.

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