BarChart

A single-measure column chart for a run of days, weeks or months, with an average headline, an average reference line and a scrubber that reads any bar.

When to use

• One measure across a short run of periods (a week, two weeks, a quarter by month) where people compare each period against the rest and the average.
• Switching ranges: stable keys (ISO dates) let bars morph instead of redrawing.
• Not for a compact trend beside a number; use Sparkline. Not for a year of daily activity; use ActivityHeatmap. Not for several series over time; use LineChart.

Usage

import { BarChart } from "@/components/iris/bar-chart/bar-chart";

const days = [
  { key: "2026-10-15", label: "Thu 15 Oct", axisLabel: "T", value: 58 },
  { key: "2026-10-16", label: "Fri 16 Oct", axisLabel: "F", value: 47 },
  { key: "2026-10-17", label: "Sat 17 Oct", axisLabel: "S", value: 12 },
];

h(BarChart, {
  data: days,
  label: "Attention asked",
  period: "15–17 Oct 2026",
  unit: "min",
  averageLabel: "Daily attention asked",
});

Props

Prop	Type	Default	Description
data	{ key: string; label: string; axisLabel?: string; value: number }[]	required	Bars in order. label is the full name for the headline and screen readers; axisLabel is the short tick under the bar (omit to keep the axis quiet).
label	string	required	What is measured; names the chart for assistive technology.
period	string	required	The 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 of the hidden data table.
showAverage	boolean	true	Draws the average as a dashed reference line.
height	number	176	Plot height in pixels; width follows the container.
formatValue	(value: number) => string	grouped number	Formats values and ticks.

Notes

• Keyboard: the plot is a slider. Arrow keys move between bars, Page Up/Down jump up to seven, Home/End go to the ends, Escape returns to the average.
• Accessibility: exposed as an image with a summary (average, highest, lowest), plus a visually hidden table of every value; range changes are announced politely.
• Motion: bars grow in on view and morph between ranges; reduced motion shows them at once.
• The value axis is fixed at four rows or fewer on 1/2/3/5 steps, so gridlines stay put across ranges.
• Reads --accent, --surface, --line, --line-strong, --ink-2 and --ink-3.