# antuikit / Recharts Scatter

> A responsive frame for one Recharts chart that paints its grid, axes, cursor and labels with the theme's chart colors and exposes each series color as `var(--series-<key>)`.

Docs: https://antuikit.com/docs/components/recharts-scatter

## Install

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

## Import

import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/recharts-chart";

## Demos

- [Basic](https://ui.antuikit.com/embed/recharts-scatter/basic.md): Plot two `Scatter` series on numeric `XAxis` and `YAxis`, with a narrow `ZAxis` range keeping the points close in size.
- [Three dimensions](https://ui.antuikit.com/embed/recharts-scatter/three-dimensions.md): Map a third field to point size with `ZAxis` and its `range`, and draw each series with its own `shape`, a star or a triangle.
- [Joined points](https://ui.antuikit.com/embed/recharts-scatter/joint-line.md): Set `line` on a `Scatter` to join its points in order, with `lineJointType` smoothing one series into a curve.
- [Labels](https://ui.antuikit.com/embed/recharts-scatter/labels.md): Nest a `LabelList` in a `Scatter` to print a value inside each bubble, and pass `activeShape` to recolor the hovered one.
- [Two Y axes](https://ui.antuikit.com/embed/recharts-scatter/multiple-y-axes.md): Give each `YAxis` a `yAxisId` and point each `Scatter` at one, so two series with different ranges share the chart.
- [Custom symbols](https://ui.antuikit.com/embed/recharts-scatter/custom-symbols.md): Pass a component to `shape` that draws `Symbols` with a different symbol type and series color for each point.
- [Custom animation](https://ui.antuikit.com/embed/recharts-scatter/custom-animation.md): Pass `animationInterpolateFn` to control how points move between datasets, as a crossfade, a staggered fade or a pop.
- [Many points](https://ui.antuikit.com/embed/recharts-scatter/many-points.md): Render a hundred `Scatter` series of ten points each with `isAnimationActive` off, colored by whether each run passed.
- [Bubble grid](https://ui.antuikit.com/embed/recharts-scatter/bubble.md): Stack one short `ScatterChart` per day on a category `XAxis`, with `ZAxis` sizing each bubble by the orders in that hour.

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