Bar chart

• Type: Component (data)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/bar-chart
• Markdown: https://ui.xzero.co.uk/components/bar-chart/markdown
• Registry item: https://mcp.xzero.co.uk/r/bar-chart.json
• Source file: registry/components/bar-chart/bar-chart.tsx
• Dependencies: motion
• Keywords: chart, bar, data, react bar chart, column chart, animated bar chart, svg bar chart, scrubbable chart, daily activity chart

When to use

• One measure across days, weeks, or months, with an average line.
• Charts with a range switch, where stable keys let bars morph between ranges.

When not to use

• Use sparkline for a compact trend.
• Use activity-heatmap for daily rhythm over a year.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/bar-chart

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { BarChart } from "@/components/xzero/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" />;
}

API reference

BarChart

A single series column chart with an average line and a scrubbable headline value.

Prop	Type	Default	Description
data (required)	{ key: string; label: string; axisLabel?: string; value: number }[]	–	Bars in order. A surviving key keeps its bar, so range switches morph.
label (required)	string	–	What is measured, such as "Active minutes".
period (required)	string	–	Range on show, under the headline.
unit	string	""	Unit after each value, such as "min".
averageLabel	string	"Daily average"	Headline label at rest.
valueLabel	string	"Total"	Headline label while a bar is scrubbed.
categoryLabel	string	"Day"	First column header in the screen reader table.
showAverage	boolean	true	Draws the average as a reference line.
height	number	176	Plot height in pixels.
formatValue	(value: number) => string	–	Formats values and ticks. Defaults to a grouped number.

Keyboard interactions

Keys	Action
ArrowLeft / ArrowRight	Moves between bars (ArrowDown and ArrowUp too).
PageDown / PageUp	Moves up to seven bars.
Home / End	Jumps to the first or last bar.
Escape	Stops scrubbing and returns to the average.

Accessibility

• 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.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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

• 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.

Related

• Sparkline: Show a compact trend beside a value.
• Activity heatmap: See a year of activity at a glance, one square per day.
• Segmented control: Switch between a small set of related views.

Also in charts

• Line chart: A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
• Donut chart: A donut whose arcs morph between datasets, with the active value rolling into the center.
• Streamgraph: Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.
• Brush chart: A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
• Waffle chart: A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.
• Slope chart: Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.
• Gauge: Show a value against a known range.
• Animated counter: Give changing totals a clear sense of movement.
• Ridgeline: Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
• Treemap: A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
• Split bar: A single 100% bar split into shares: rest on a segment to widen it and read its exact figures, toggle segments from the legend and the rest reflow, with labels inside when they fit and on leader lines when they don't.

Guidance for AI tools

Bar chart: Compare one measure across days and scrub any bar for its value. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt