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
- Bars and a line on one time axis, such as revenue and opex columns under an operating margin line
- A measure against its goal or limit, such as closed sales against a dashed goal or latency past a limit
- Cash or liquidity flowing in and out by period, over the balance those flows add up to
When not to use
- One volume series alone, with no goal or baseline to compare against: use the Area Chart blocks
- Two or more series drawn only as strokes across shared time buckets: use the Line Chart blocks
Agent notes
- Every block plots in a recharts
ComposedChartin the shadcnChartContainer; a new series is one moreBar,AreaorLinechild with adataKey
Third-party API docs
- Recharts v3: API reference, docs, used by 5 of 5 blocks
- Sonner v2: API reference, docs, used by 5 of 5 blocks
Markdown
https://web.dev.reui.io/blocks/chart/composed-chart.mdMCP
search({ query: "composed chart", type: "block", category: "composed-chart" })Shadcn Composed Charts That Put a Series Against Its Goal
A composed chart mixes mark types on shared axes, so a measure and what it is judged by read together. These blocks cover lending pool liquidity, closed sales against a monthly goal, operating cashflow over a reserve floor, an operating margin against its target and a rolled-back canary release.
Every block plots in a Recharts ComposedChart inside the shadcn Chart wrapper, in a ReUI Frame or a shadcn Card. Each exports a CSV from a DropdownMenu, and the sales card adds a ReUI ColorPicker for its accent.
All Composed Chart Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Liquidity Flows Lending pool liquidity chart with asset-stacked supply, withdrawals below zero and a TVL lane
- Sales vs Goal Sales vs goal line chart with an attainment and YTD tooltip, quarter close marker and accent picker
- Cashflow Trend Cashflow composed chart with a balance panel, in and out columns, net flow dots and a waterfall
- Operating Margin Operating margin chart with revenue and opex bars, a margin lane, a target and hatched forecast
- Canary Rollback Canary latency chart with stacked baseline and regression columns, breach stats and a rollback track
What These Composed Chart Blocks Cover
- Liquidity flows Lending pool supply stacked by asset above zero, withdrawals below it and TVL in a lane above, over 30D, 90D or 1Y with an asset filter.
- Sales against goal Closed sales by month against a dashed goal and last year, with attainment, both deltas and the running year to date in the tooltip, and a marker at the last quarter close.
- Cashflow and waterfall A balance panel over a reserve floor above in and out columns with net flow dots, or a waterfall from the opening balance, with closing cash, burn and low point KPIs.
- Operating margin Revenue and opex columns by month or quarter, an operating margin line against a dashed target and hatched forecast months, with year to date stats.
- Canary rollback A rolled-back release's latency per sample as stacked columns of baseline, regression and excess past a dashed limit, under a stage track that ends on the rollback.
Related Shadcn Chart Categories
- Area Chart Area chart cards with gradient fills, comparisons to a prior period or baseline, hover readouts and CSV export for trends over time.
- Bar Chart Bar and column charts, stacked hourly outcomes, 3D prisms, diverging lanes and lollipop stems for comparing values.
- 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.
- 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
What is a composed chart?
A chart that mixes mark types on shared axes, such as revenue columns under a margin line. Recharts draws it with ComposedChart, where a series is a Bar, an Area or a Line child with its own data key; the TVL lane and the margin line here are custom Curve layers.
Do Refresh and the exports work?
The exports do: CSV and copy actions build real files and clipboard text from each block's data. No block fetches anything, so where a block has Refresh it only replays the chart; wire it to your own API.
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.