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 share of a total split across a few sources or browsers around a donut
- A donut with the total in its center and a row per segment under a period switch
- Spend per category against its budget on a rose, where an overspend breaks a dashed ring
When not to use
- A single figure measured against a target on an arc gauge: use the Radial Chart blocks
- Shares across more than a handful of categories that need exact comparison: use the Bar Chart blocks
Agent notes
- chart-13 and chart-27 draw a recharts
Piedonut whoseinnerRadiussets the hole; chart-54 draws its rose as its own SVG in budget-rose.tsx
Third-party API docs
- Sonner v2: API reference, docs, used by 3 of 3 blocks
- Recharts v3: API reference, docs, used by 2 of 3 blocks
- Motion v12: API reference, docs, used by 2 of 3 blocks (the docs follow the latest Motion, with no React API break since v12)
Markdown
https://web.dev.reui.io/blocks/chart/pie-chart.mdMCP
search({ query: "pie chart", type: "block", category: "pie-chart" })Shadcn Donut Charts and a Cloud Budget Rose
A pie or donut answers one question: how a total splits across a few parts. The inflows card rings 3 tracked sources and a hatched rest, the browser card opens any browser into its versions and flags those under a support line, and the cloud spend card draws a budget rose, where each wedge is as wide as its category's budget and as long as its use.
The 2 donuts draw a Recharts Pie inside the shadcn Chart wrapper, and the rose is its own SVG animated with Motion. All 3 sit in a ReUI Frame, switch their period from a ToggleGroup or a Select, and export a CSV.
All Pie Chart Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Inflows by Source Capital inflows donut card with a period switch, change on the period before and a source breakdown
- Browser Usage Browser usage donut with version drill-down, support line flags and a breakdown table
- Cloud Spend Budget rose of cloud spend by category with overspend past a budget ring and service drill-in
What These Pie Chart Blocks Cover
- Capital inflows donut Inflows over a week, month or year with the total and its change on the period before, a ring of 3 tracked sources and a hatched rest, and a row per source with share and change.
- Browser share with versions Unique visitors by browser or rendering engine over 7, 30 or 90 days, a ring of the previous period, and a drill into each browser's versions, flagged under a support line.
- Cloud spend budget rose 6 cost categories as wedges sized by budget and use, a dashed budget ring that an overspend breaks, at risk from 90% of budget, and a drill into each category's services.
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.
- 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.
- 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.
- 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
Can I turn a donut into a full pie?
Yes, on the 2 donuts. The hole is the innerRadius on the Recharts Pie, so setting it to 0 draws a full pie. Keep the donut if you want the total in the center.
How is the budget rose different from a pie?
A pie gives each slice an angle by its share of one total. The rose gives each category an angle by its share of the budget and a length by how much of that budget it used, so a category over budget reaches past the dashed ring even when its share of spend is small.
How many slices should a donut have?
A handful. Past 5 or 6 segments the small ones become hard to compare, and a bar chart that ranks the values reads better.
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.