Bar chart
Compare one measure across days and scrub any bar for its value.
pnpm dlx shadcn@latest add @uiarc/bar-chartLive · keyboard ready
- One measure across days, weeks, or months, with an average line.
- Charts with a range switch, where stable keys let bars morph between ranges.
- Use sparkline for a compact trend.
- Use activity-heatmap for daily rhythm over a year.
Installation
Add Bar chart with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/bar-chartAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { BarChart } from "@/registry/components/bar-chart/bar-chart"; const week = [ { key: "2026-09-14", label: "Mon, Sep 14", axisLabel: "M", value: 32 }, { key: "2026-09-15", label: "Tue, Sep 15", axisLabel: "T", value: 48 }, { key: "2026-09-16", label: "Wed, Sep 16", axisLabel: "W", value: 27 },]; export function ActiveMinutes() { return <BarChart data={week} label="Active minutes" period="Sep 14–16, 2026" unit="min" />;}BarChart
A single series column chart with an average line and a scrubbable headline value.
PropTypeDefaultDescription
dataRequired{ key: string; label: string; axisLabel?: string; value: number }[]–Bars in order. A surviving key keeps its bar, so range switches morph.labelRequiredstring–What is measured, such as "Active minutes".periodRequiredstring–Range on show, under the headline.unitstring""Unit after each value, such as "min".averageLabelstring"Daily average"Headline label at rest.valueLabelstring"Total"Headline label while a bar is scrubbed.categoryLabelstring"Day"First column header in the screen reader table.showAveragebooleantrueDraws the average as a reference line.heightnumber176Plot height in pixels.formatValue(value: number) => string–Formats values and ticks. Defaults to a grouped number.- ArrowLeftorArrowRight
- Moves between bars (ArrowDown and ArrowUp too).
- PageDownorPageUp
- Moves up to seven bars.
- HomeorEnd
- Jumps to the first or last bar.
- Escape
- Stops scrubbing and returns to the average.
- The SVG is role="img" with a summary of average, highest, and lowest.
- A focusable role="slider" scrubber reads each bar as its label and value.
- A visually hidden table lists every value, and range changes are announced politely.
- Bars grow in with a stagger on first view; new ranges morph bars, ticks, and the average line.
- Scrubbing moves a cursor and rolls the headline value.
- Reduced motion shows bars at once and swaps values without movement.
- The plot measures its width with a ResizeObserver and bars cap at 28px, so wide containers get spacing rather than fat bars.
- Scrubbing uses touch-action pan-y, so a horizontal drag scrubs while vertical swipes scroll the page.
- Bars, ticks, and the average line animate with motion values; one series and many bars per view is the intended load.
- A visually hidden table renders every value, so very long ranges double the DOM.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for one measure across days, weeks, or months. Use sparkline for a compact trend and activity-heatmap for daily rhythm over a year.
- Use stable keys such as ISO dates so switching ranges morphs instead of redrawing.
The full library index for assistants is at /llms.txt.