# antuikit / TanStack Stacked

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

## Install

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

## Import

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

## Demos

- [Stacked areas](https://ui.antuikit.com/embed/tanstack-stacked/time-area.md): Set `color` on `areaY` to a category and the areas stack on a time axis, so the top edge traces the total over time.
- [Normalized](https://ui.antuikit.com/embed/tanstack-stacked/normalized.md): Pass `stack({ offset: "normalize" })` to stretch every month to the full height and compare each category's share.
- [Streamgraph](https://ui.antuikit.com/embed/tanstack-stacked/streamgraph.md): Use `stack({ offset: "wiggle", order: "inside-out" })` to float the layers around a moving center line.
- [Band cursor](https://ui.antuikit.com/embed/tanstack-stacked/band-cursor.md): Add two `crosshair` marks to stacked `barY` bars: a band that follows the month and a dashed rule at the focused segment.
- [Diverging](https://ui.antuikit.com/embed/tanstack-stacked/likert.md): Set `anchor` on `stack` to center each bar on the middle of the neutral answers, so disagreement grows left and agreement right.
- [Marimekko](https://ui.antuikit.com/embed/tanstack-stacked/marimekko.md): Lay counts out with `mosaicY`, so each column's width is its share of answers and each segment its share within the column.
- [Three y axes](https://ui.antuikit.com/embed/tanstack-stacked/composed.md): Bind marks to named scales with `yScale` and set `side` on each scale to give temperature, rain and wind their own axis.

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