# Shadcn Area Chart blocks

> Area chart cards with gradient fills, comparisons to a prior period or baseline, hover readouts and CSV export for trends over time.

- Type: Pro blocks (Charts)
- Page: https://web.dev.reui.io/blocks/chart/area-chart
- Blocks: 4
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A metric over time drawn as a gradient filled area and read against an earlier period or a baseline
- Dashboard widgets whose toolbar reshapes the view and exports the plotted data as CSV
- Report cards where a hovered point reads out beside its earlier value or its share of the whole

## When not to use

- A series held against a target or limit line drawn across the same axis: use the [Composed Chart blocks](https://web.dev.reui.io/blocks/chart/composed-chart.md)
- Several KPI tiles, each with a tiny trend tucked under its value: use the [Sparkline blocks](https://web.dev.reui.io/blocks/chart/sparkline.md)
- Conversion stages where each step keeps only part of the volume before it: use the [Sankey Chart blocks](https://web.dev.reui.io/blocks/chart/sankey-chart.md)

## Agent notes

- Keep the `useId` prefix on any new `linearGradient` id, so 2 copies of a block on one page never share a fill
- Copy and export confirmations call `toast` from `sonner`, so the app needs a mounted Toaster to show them
- `Chart` takes no props, so real figures replace the sample rows in the block's data file

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 4 of 4 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 4 of 4 blocks

## Blocks

- [Generation Mix](https://web.dev.reui.io/blocks/chart/area-chart/chart-16.md): Power generation mix ridgeline chart with 6 sources in 3D depth, a 2D toggle and baseline menu. Best for several sources over one day as ridges standing in depth, where hovering one dims the rest and reads its share of that hour.
- [Campaign Impressions](https://web.dev.reui.io/blocks/chart/area-chart/chart-17.md): Campaign impressions chart of this period against the prior one, with 4 stats and a channel filter. Best for dashed current and prior periods summed from the channels left on, with a hover card that splits each point into its channel mix.
- [Orders Overview](https://web.dev.reui.io/blocks/chart/area-chart/chart-18.md): Orders overview chart with orders, revenue and average order tabs over a hatched gradient area. Best for store metrics as 3 tabs that swap a single area, with a pinned pill that adds the prior period's matching value.
- [Inbound Leads](https://web.dev.reui.io/blocks/chart/area-chart/chart-52.md): Monthly leads area chart comparing this year to last, with a widget toolbar and accent picker. Best for the current year against last year with a switchable linear or 3 point moving average trend, by month or by quarter.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.