# antuikit / TanStack Area

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

## Install

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

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/tanstack-area/basic.md): Pass `areaY` the rows and the `x` and `y` fields to fill the space under one series, smoothed with a natural curve.
- [Linear](https://ui.antuikit.com/embed/tanstack-area/linear.md): Set `curve` to `curveLinear` to join the points with straight lines.
- [Step](https://ui.antuikit.com/embed/tanstack-area/step.md): Set `curve` to `curveStep` for a value that holds until the next point, like a price or a plan.
- [Stacked](https://ui.antuikit.com/embed/tanstack-area/stacked.md): Set `z` and `color` to a series field and `layout` to `stack()` to pile the series on top of each other.
- [Stacked to 100%](https://ui.antuikit.com/embed/tanstack-area/stacked-expand.md): Pass `stack({ offset: "normalize" })` to stack the series as shares of each month's total.
- [Gradient](https://ui.antuikit.com/embed/tanstack-area/gradient.md): Declare `gradients` and point `fill` at them with `url(#id)` to fade each series toward the baseline.
- [Axes](https://ui.antuikit.com/embed/tanstack-area/axes.md): Give the `y` scale a `domain` and tick `values` to show a value axis with chosen gridlines.
- [Legend](https://ui.antuikit.com/embed/tanstack-area/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-area/icons.md): Name each series with an icon in its color instead of a dot.
- [Time range](https://ui.antuikit.com/embed/tanstack-area/interactive.md): Rebuild the definition when a `Select` changes, to show the last 7, 30 or 90 days of daily data.
- [Animated range](https://ui.antuikit.com/embed/tanstack-area/traffic.md): Render through `RendererChart` with a `motion()` renderer so the area springs between ranges, with a dot and crosshair on the focused day.

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