# antuikit / Recharts Composed

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

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

- [Line, bar and area](https://ui.antuikit.com/embed/recharts-composed/line-bar-area.md): Mix `Area`, `Bar`, `Line` and `Scatter` in one `ComposedChart`, each reading its own field of the same rows.
- [Same data twice](https://ui.antuikit.com/embed/recharts-composed/same-data.md): Draw one field as both a `Bar` and a `Line`, with `payloadUniqBy` keeping a single entry in the tooltip and legend.
- [Vertical layout](https://ui.antuikit.com/embed/recharts-composed/vertical.md): Set `layout="vertical"` to lay bars, the area and the line along a category `YAxis`, one row per city.
- [Axis labels](https://ui.antuikit.com/embed/recharts-composed/axis-labels.md): Pass `label` to `XAxis` and `YAxis` to name each axis, with `position` and `angle` placing the text beside it.
- [Line of best fit](https://ui.antuikit.com/embed/recharts-composed/line-of-best-fit.md): Plot sample points with `Scatter` on a numeric axis and draw a `Line` through two end points as the trend for each series.
- [Banded range](https://ui.antuikit.com/embed/recharts-composed/banded.md): Give an `Area` a `[low, high]` pair per row to shade a range around a `Line`, with `connectNulls` bridging the missing month.
- [Error bars](https://ui.antuikit.com/embed/recharts-composed/error-bar.md): Nest `ErrorBar` in a `Scatter` with `direction` x or y to show the uncertainty of each point, as one value or a low and high pair.
- [Responsive size](https://ui.antuikit.com/embed/recharts-composed/responsive.md): `ChartContainer` fills the width of its parent and takes its height from `className`, so the chart resizes with the card.
- [Active labels](https://ui.antuikit.com/embed/recharts-composed/target-price.md): Track the hovered row with `onMouseMove` and render a `LabelList` only at that index, labeling the price, target and range.

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