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 volume trend over time drawn as a gradient filled area under a headline total and period tabs
- Funnel stages stacked as layered areas so each step reads against the one before it
When not to use
- A metric judged against a goal, a forecast or a second series drawn as a stroke: use the Composed Chart blocks
- Several KPI tiles, each with a tiny trend tucked under its value: use the Sparkline blocks
Agent notes
- Gradient fills are
linearGradientdefs referenced by id, so a renamed series needs its gradient id renamed too
https://reui.io/blocks/chart/area-chart.mdsearch({ 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: visits, orders, impressions. These blocks are the card around that chart, a headline total with its change, period controls that swap the dataset, and a tooltip styled to match.
They use the shadcn Chart wrapper over Recharts inside a ReUI Frame, with Tabs or a Select for the period. Fills are gradients defined once per series, so a renamed series renames its gradient too.
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.
- Conversion Funnel Conversion Funnel Stacked Area Chart with Stage KPI Tiles and Period Selector
- Campaign Impressions Compact campaign analytics card with gradient area chart and 5D to 6M period tabs
- Orders Overview Orders overview card with period tabs, stat tiles, and animated gradient area chart
What These Area Chart Blocks Cover
- Stacked conversion funnel Visits, product views, add to cart and checkout stacked as layered areas, with 4 KPI tiles and a 7d to 12m period selector.
- Gradient overview cards A single gradient area under a headline total, with 5D to 6M or Day to Year tabs that swap the dataset and an animated reveal.
- Tooltips that match the card Each block ships its own tooltip, including a dark one, instead of the Recharts default.
Related Shadcn Chart Categories
- Bar Chart Bar and column charts, grouped and stacked bars, lollipop stems and segmented bar meters for comparing values.
- Composed Chart Composed charts that layer areas and lines on one axis, with reference lines, goals and release markers.
- Line Chart Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
- Pie Chart Pie and donut chart cards with center totals, per-segment legends and period tabs for share of a whole.
- Radial Chart Radial gauges with semicircle and full arcs, segmented rings and status labels for progress toward a target.
- 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 (301) Browse 301 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (42) Browse 42 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (47) Browse 47 Shadcn Charts blocks across 8 categories.
- Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 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?
How do the period controls work?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.