For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- Several KPI tiles, each with a tiny trend tucked under its value: use the Sparkline blocks
- Conversion stages where each step keeps only part of the volume before it: use the Sankey Chart blocks
Agent notes
- Keep the
useIdprefix on any newlinearGradientid, so 2 copies of a block on one page never share a fill - Copy and export confirmations call
toastfromsonner, so the app needs a mounted Toaster to show them Charttakes no props, so real figures replace the sample rows in the block's data file
Third-party API docs
- Recharts v3: API reference, docs, used by 4 of 4 blocks
- Sonner v2: API reference, docs, used by 4 of 4 blocks
Markdown
https://reui.io/blocks/chart/area-chart.mdMCP
search({ query: "area chart", type: "block", category: "area-chart" })Shadcn Area Chart Cards With the Controls Built In
An area chart is a line with its volume filled in, so it suits totals that grow and shrink over time: grid output, impressions, orders, leads. These blocks are the card around that chart, the change against an earlier period or a baseline, a toolbar that reshapes the view and exports the data, and a hover readout styled to match.
They draw with Recharts and a shadcn Chart config inside a ReUI Frame or a shadcn Card, and every toolbar opens DropdownMenu menus. Some blocks add ToggleGroup switches, metric Tabs, an expanded Dialog view or a ReUI ColorPicker for the accent. Each gradient id is unique per instance, so 2 copies of a block on one page never share a fill.
All Area Chart Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Generation Mix Power generation mix ridgeline chart with 6 sources in 3D depth, a 2D toggle and baseline menu
- Campaign Impressions Campaign impressions chart of this period against the prior one, with 4 stats and a channel filter
- Orders Overview Orders overview chart with orders, revenue and average order tabs over a hatched gradient area
- Inbound Leads Monthly leads area chart comparing this year to last, with a widget toolbar and accent picker
What These Area Chart Blocks Cover
- Generation mix in 3D depth Hourly output from 6 power sources across a day as gradient ridges standing in depth, with a 3D or 2D toggle, a baseline menu, source presets and an hour readout.
- Campaign against the prior period Impressions summed across 4 channels as dashed current and prior period areas, with 4 stats, a channel filter and a tooltip that splits each point by channel.
- Store orders by metric Orders, revenue and average order as tabs over a single hatched gradient area, with a Day to Year menu and a value pill that adds the prior period.
- This year against last year Monthly or quarterly leads over an area fill with drifting dots, last year in grey and a linear or 3 point moving average trend line.
- Readouts and toolbars that match the card Each block ships its own hover readout instead of the Recharts default, plus a toolbar with CSV export and a copied summary.
Related Shadcn Chart Categories
- Bar Chart Bar and column charts, stacked hourly outcomes, 3D prisms, diverging lanes and lollipop stems for comparing values.
- Composed Chart Composed charts that mix bars, lines and areas on one axis: liquidity flows, sales against a goal, cashflow, margin and a canary rollback.
- Line Chart Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
- Pie Chart Donut cards for share of a whole, with source rows, version drill-down and period switches, plus a budget rose for spend against budget.
- Radial Chart Radial cards for a value against a limit or target: concentric error budget rings, API health ring gauges and a day clock of inflows.
- Sankey Chart Sankey flow charts for income statements, trial journeys and sales funnels, with hover tracing, drop-off nodes and leak markers.
- Slope Chart Slope charts for rank shifts between 2 orderings of the same items, with weighted lines, hover tracing and animated re-sorts.
- Sparkline KPI tiles and metric lists where each value pairs with a small line, area or bar sparkline and a delta.
- Status Tracker Per-row status trackers for run history, deploy stages and pipelines, with hover details and filters.
- Stats Number-first KPI strips for when the metric leads and a trend line would only be decoration.
- Dashboard Full overview screens that combine a metric row, a chart layer and a data grid into one page.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use an area chart instead of a line chart?
Use an area chart when the size of the total matters, such as visits, orders or impressions, because the fill reads as volume. Use a line chart when you compare several series or care about the exact shape of a trend, where overlapping fills would hide each other.
How do the comparisons work?
Each block reads its comparison from its own sample data: the window just before the current one, a matching previous period, last year's months, or hand set baseline totals per power source. Replace that data and the comparison follows, with no new component logic.
Do the exports need a backend?
No. The CSV download and the copied summary are built in the browser from the same sample data the chart draws, so they follow your data once you replace it.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.