Shadcn Chart 17 Block

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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

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 full call analytics page with 6 metric buttons, an agent ranking and integrations: use the Voice Agent Calls block
A full year by month or quarter against the year before, with a fitted trend line: use the Inbound Leads block
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

Replace DAILY_ROWS and WEEKLY_ROWS, both in thousands of impressions; formatImpressions adds the K or M suffix
viewOf takes the prior window from the rows before the current one, so DAILY_ROWS needs 60 days and WEEKLY_ROWS 26 weeks
REPORT_DATE is a fixed string the header prints as the last day, not read from the rows
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 API docs

Recharts v3: API reference, docs
Sonner v2: API reference, docs

Markdownhttps://web.dev.reui.io/blocks/chart/area-chart/chart-17.md

MCPget_block("chart-17")

Installnpx shadcn@latest add @reui/chart-17

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in the Campaign Impressions Block

Dependencies

cn
recharts
sonner

Shadcn Campaign Impressions Block

Campaign impressions chart of this period against the prior one, with 4 stats and a channel filter. Part of the ReUI Shadcn Area Chart blocks collection.

Ad impressions summed across search, social, display and video as dashed current and prior period areas, plus total, daily average, peak and top channel stats, a mix tooltip, accent picker and CSV export. ReUI Frame, Badge, ColorPicker. Marketing.

It is composed from Badge, Button, Button Group, Chart, Color Picker, Dropdown Menu, Frame, Separator, and more, so every part of it is a primitive you can restyle with your own design tokens.

What You Can Build With the Campaign Impressions Block

Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
Combine it with the other Shadcn Area Chart blocks to assemble a full screen instead of a single section.

All Shadcn Area Chart Blocks

The rest of this category, each on its own page with 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
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

Related Shadcn Charts Block Categories

Bar Chart (12) Bar and column charts, stacked hourly outcomes, 3D prisms, diverging lanes and lollipop stems for comparing values.
Composed Chart (5) 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 (6) Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
Pie Chart (3) 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 (3) 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 (3) Sankey flow charts for income statements, trial journeys and sales funnels, with hover tracing, drop-off nodes and leak markers.

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 the Campaign Impressions block?

Use it for dashed current and prior periods summed from the channels left on, with a hover card that splits each point into its channel mix.

The Area Chart category fits:

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

For a full call analytics page with 6 metric buttons, an agent ranking and integrations, use the Voice Agent Calls block. For a full year by month or quarter against the year before, with a fitted trend line, use the Inbound Leads block. For a series held against a target or limit line drawn across the same axis, use the Composed Chart blocks. For several KPI tiles, each with a tiny trend tucked under its value, use the Sparkline blocks. For conversion stages where each step keeps only part of the volume before it, use the Sankey Chart blocks.

What is the Campaign Impressions block built with?

Campaign Impressions uses Badge, Button, Button Group, Chart, Color Picker, Dropdown Menu, Frame, Separator, Tooltip. Installing the block through the ReUI registry pulls those dependencies in for you.

Can I restyle the Campaign Impressions block?

Yes. It reads your design tokens, so switching style, radius, base color, font, or icon library in the customizer restyles it without touching the markup.

How should I use Shadcn area chart blocks in a real project?

Treat them as structured starting points. Keep the layout, hierarchy, and interaction ideas that work, then replace placeholder content, data wiring, and business logic with your own product requirements.

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.