Shadcn Chart 16 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: Several sources over one day as ridges standing in depth, where hovering one dims the rest and reads its share of that hour

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

Several series compared as thin strokes on one flat axis, with no filled area: use the Line Chart blocks
One metric month by month against the same months a year earlier: 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 SOURCES and SOURCE_CONFIG in data.ts; each source's baseline totals are hand set, not derived from its output
MAX_GW and GW_TICKS fix the scale at 16 GW, so a source that peaks higher overflows the plot
Refresh only bumps revision after REFRESH_MS to replay the rise; nothing is refetched
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-16.md

MCPget_block("chart-16")

Installnpx shadcn@latest add @reui/chart-16

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in the Generation Mix Block

Dependencies

cn
recharts
sonner

Shadcn Generation Mix Block

Power generation mix ridgeline chart with 6 sources in 3D depth, a 2D toggle and baseline menu. Part of the ReUI Shadcn Area Chart blocks collection.

Hourly grid output for one day by solar, wind, nuclear, gas, hydro and battery, a total vs forecast, last week or 30-day average, source presets, hour readout, CSV and JSON export. ReUI Frame, shadcn ToggleGroup, Dialog. Energy dashboard.

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

What You Can Build With the Generation Mix 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.

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

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 Generation Mix block?

Use it for several sources over one day as ridges standing in depth, where hovering one dims the rest and reads its share of that hour.

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 several series compared as thin strokes on one flat axis, with no filled area, use the Line Chart blocks. For one metric month by month against the same months a year earlier, 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 Generation Mix block built with?

Generation Mix uses Button, Button Group, Chart, Dialog, Dropdown Menu, Frame, Spinner, Toggle Group, Tooltip. Installing the block through the ReUI registry pulls those dependencies in for you.

Can I restyle the Generation Mix 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.