# antuikit / TanStack Scatter

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

## Install

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

## Import

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

## Demos

- [Trend line](https://ui.antuikit.com/embed/tanstack-scatter/regression.md): Pair `dot` with `linearRegressionY` on the same rows to draw a least-squares trend line through every car's power and fuel economy.
- [Bubble](https://ui.antuikit.com/embed/tanstack-scatter/bubble.md): Set `r` to a field and give `rScale` a square-root scale, so each penguin's body mass sets its bubble's area while `color` marks its species.
- [Many points](https://ui.antuikit.com/embed/tanstack-scatter/many-points.md): Render through `CanvasChart` to draw hundreds of sized, colored dots on a canvas instead of one SVG element per point.
- [Log scale](https://ui.antuikit.com/embed/tanstack-scatter/log-scale.md): Pass a `scaleLog` instance with a fixed `domain` to the x scale, so sizes from a few hundred to tens of thousands share one readable axis.
- [Connected](https://ui.antuikit.com/embed/tanstack-scatter/connected.md): Join the points in time order with `lineY`, then add `arrow` marks for direction and `text` labels every five years.
- [Lag plot](https://ui.antuikit.com/embed/tanstack-scatter/lag.md): Use `rollingWindow` with a `first` reducer to pair each close with the previous day's, plotted against a dashed line of equal values.
- [Marginal histograms](https://ui.antuikit.com/embed/tanstack-scatter/marginal-histograms.md): Arrange a scatterplot and two `binX` and `binY` histograms in a `viewGrid`, with `share` lining each histogram up with its axis.
- [Framed](https://ui.antuikit.com/embed/tanstack-scatter/framed.md): Set `guides` to `false` and add a rounded `frame` mark to set the plot area apart when the chart has no axes or gridlines.
- [Parallel coordinates](https://ui.antuikit.com/embed/tanstack-scatter/parallel-coordinates.md): Use `fold` and `normalize` to put four events with different units on one 0 to 100 scale, with a line per country across them.
- [Small multiples](https://ui.antuikit.com/embed/tanstack-scatter/anscombe.md): Wrap the marks in `facet` with `columns` set to 4 to draw one scatterplot per set on shared, fixed x and y domains.

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