# antuikit / Recharts Area

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

## Install

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

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/recharts-area/basic.md): Fill each `Area` with a `linearGradient` that fades from its series color to transparent, so two overlapping series stay readable.
- [Stacked](https://ui.antuikit.com/embed/recharts-area/stacked.md): Give every `Area` the same `stackId` to pile the series on top of each other, so the top edge reads as the total.
- [Range](https://ui.antuikit.com/embed/recharts-area/range.md): Pass a `[low, high]` pair as each row's value and the `Area` fills the band between them, like a daily temperature range.
- [Connect nulls](https://ui.antuikit.com/embed/recharts-area/connect-nulls.md): Set `connectNulls` to draw the area straight across missing values instead of breaking it, here toggled with a switch.
- [Custom curve](https://ui.antuikit.com/embed/recharts-area/cardinal.md): Pass a d3 curve such as `curveCardinal.tension(0.8)` to `type` and compare it with the built-in `monotone` curve on the same data.
- [Percent stacked](https://ui.antuikit.com/embed/recharts-area/percent.md): Set `stackOffset="expand"` to scale each stack to 100%, and use the tooltip's `formatter` to show every source's share.
- [Tiny](https://ui.antuikit.com/embed/recharts-area/tiny.md): Drop the axes, grid and tooltip to turn an `AreaChart` into a sparkline that sits beside a headline number.
- [Fill by value](https://ui.antuikit.com/embed/recharts-area/fill-by-value.md): Split the fill gradient at zero with `useYAxisScale` and `useChartHeight`, so gains and losses get their own color.
- [Custom events](https://ui.antuikit.com/embed/recharts-area/custom-events.md): Handle `onClick` and `onDoubleClick` on the chart to pin a reference line at the clicked day and clear it again.
- [Prevent right click](https://ui.antuikit.com/embed/recharts-area/prevent-context-menu.md): Call `preventDefault` in `onContextMenu` to stop the browser's context menu from opening when you right-click the chart.
- [Responsive](https://ui.antuikit.com/embed/recharts-area/responsive.md): Size the chart with the container's `className`, here a golden-ratio aspect with a maximum height, and mark values with `ReferenceLine`.
- [Custom animation](https://ui.antuikit.com/embed/recharts-area/custom-animation.md): Pass `animationInterpolateFn` and a `shape` built on `AreaRevealShape` to grow the area up from the bottom instead of revealing it left to right.
- [Range animation](https://ui.antuikit.com/embed/recharts-area/range-custom-animation.md): Animate a range `Area` and a `baseValue` area with a custom `animationInterpolateFn`, and swap the data to see the update animation.
- [Synchronized](https://ui.antuikit.com/embed/recharts-area/synchronized.md): Give several charts the same `syncId` so hovering one moves the tooltip and cursor in all of them at once.

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