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
- Amounts compared across years, weeks, categories or regions as prisms, patterned bars, pills or lanes
- Activity over time stacked by outcome, such as job runs, audit events, firewall requests or data syncs
- Run durations and error budgets read against a timeout, a warning line or a paging threshold
When not to use
- A share of a whole where the slices read better around a ring: use the Pie Chart blocks
- A capacity or allocation split into colored segments on one meter, with no axis: use the Stats blocks
- Rows of jobs or deploys, each with its own run history strip: use the Status Tracker blocks
Agent notes
Chartrenders with no props and fetches nothing, so every bar, lane and limit is seeded from constants in the block folder
Third-party API docs
- Sonner v2: API reference, docs, used by 12 of 12 blocks
- Recharts v3: API reference, docs, used by 10 of 12 blocks
- Motion v12: API reference, docs, used by 4 of 12 blocks (the docs follow the latest Motion, with no React API break since v12)
- Shiki v4: API reference, docs, used by 1 of 12 blocks
Markdown
https://web.dev.reui.io/blocks/chart/bar-chart.mdMCP
search({ query: "bar chart", type: "block", category: "bar-chart" })Shadcn Bar Charts, From Fund Prisms to SLO Lollipops
Bars compare amounts: years, weeks, categories or regions against each other, hours or days split by outcome, or a run or an error budget against its limit. This category covers all 3, from yearly fund inflows and road and rail transit lanes to hourly columns stacked by outcome and SLO lollipops.
Most blocks draw their bars with the shadcn Chart wrapper over Recharts, inside a ReUI Frame or a shadcn Card, with ToggleGroup chips, DropdownMenu toolbars, a Combobox job picker or a Select above the plot. The fund inflow prisms and the firewall pill grid are plain elements, and the transit lanes are HTML capsules on the Chart surface.
All Bar Chart Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Yearly Fund Inflows Yearly capital inflows chart with 3D prisms stacked by fund and a hatched run-rate estimate
- Training Volume Weekly training volume bar chart with an accent week and last block ghost bars or plan finish tapes
- Inventory Velocity Inventory velocity bar chart with pill bars toned by stock health, a warehouse filter and sorting
- Transit vs Target Diverging road and rail transit bar chart by region, ahead of or behind target on a live feed
- Cron Runner Load Hourly runner time stacked bar chart with outcome toggles and a timeout burn callout
- Cron Run Durations Cron job run duration bars with status tones, a timeout line and a Run now toolbar
- Audit Log Volume Audit log event volume chart with stacked outcome pills, drag range selection and denial avatars
- Firewall Traffic Hourly firewall traffic pill grid with hour tooltips, a range and view toolbar and incident markers
- Error Budget Burn Error budget burn-down with daily lollipop stems, an SLO picker and a budget ribbon
- SLO Burn Rate SLO burn rate panel with hourly log scale lollipops, window tracks, alert rules and mute
- Data Sync Activity Hourly data sync activity chart for all connections with a Runs or Rows toggle and a source filter
- Sync Run History Connection sync history card with hourly outcome columns and a recent runs list
What These Bar Chart Blocks Cover
- Years, weeks and categories Yearly fund inflows as 3D prisms with a hatched run-rate estimate, weekly training volume against the last block or the plan, and inventory velocity pills toned by days of supply.
- Diverging lanes Road and rail transit lanes per region that grow left or right of a delivery target, rerank on a Median or P90 switch and drift as a demo carrier feed reports.
- Stacked outcome columns Cron runner time, firewall requests and data sync runs stacked by outcome per hour, audit log events in 5 minute to daily buckets with a drag range, and one connection's columns above its 8 newest runs.
- Limits and lollipops One cron job's run durations split into queue, execute and teardown under a dashed timeout line, and SLO lollipops that hang below 0% once the error budget is overspent or sit on a log axis for burn rate.
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.
- 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.
- 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
Which bar chart blocks use Recharts?
Most of them, through the shadcn Chart wrapper. The fund inflow prisms and the firewall pill grid are built from plain elements, so they carry no chart dependency. The transit lanes are HTML as well, but they sit on the shadcn Chart surface, so that block still installs it.
Can I change the timeout or SLO line?
Yes. The run duration block draws its dashed timeout line from the job's timeout in its data file. The error budget warning line and the burn rate paging line come from constants in the block folder, and the warning tag is typed text, so update it with the value.
Do Refresh and the exports work?
The exports do: in the 10 blocks that have them, CSV, JSON and copy actions build real files and clipboard text from the block's data. No block fetches anything, so wire Refresh to your own API before you ship.
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.