# antuikit / TanStack Financial

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

## Install

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

## Import

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

## Demos

- [Price intervals](https://ui.antuikit.com/embed/tanstack-financial/interval.md): Give `barX` an `x1` and `x2` to draw each session from its open to its close, colored by whether the price rose or fell.
- [Candlestick](https://ui.antuikit.com/embed/tanstack-financial/candlestick.md): Stack three `link` marks to draw a thin low to high wick under a thick open to close body for every trading day.
- [Range band](https://ui.antuikit.com/embed/tanstack-financial/temperature-range.md): Fill an `areaY` between `y1` and `y2` and trace both edges with `lineY` to show a daily low to high range.
- [Percentile ribbon](https://ui.antuikit.com/embed/tanstack-financial/quantile-ribbon.md): Reduce rows with `groupBy` and `quantile` to draw a median line inside a band from the 10th to the 90th percentile.
- [Bollinger band](https://ui.antuikit.com/embed/tanstack-financial/bollinger.md): Compute a trailing mean and `deviation` with `rollingWindow`, then shade two standard deviations either side of it.

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