BarChart

Basic

Pass data as an array of { label, value } objects. Colours default to the raster series palette (--raster-series-*) or can be set per bar with colors.

Conformance results by status

Bar chart, 4 points. Pass to To do. Values from 8 to 42.

Show data table

import { BarChart } from '@eekodigital/raster';

<BarChart
  data={[
    { label: 'Pass', value: 42 },
    { label: 'Fail', value: 8 },
    { label: 'N/A', value: 12 },
    { label: 'To do', value: 24 },
  ]}
  colors={['var(--demo-good)', 'var(--demo-bad)', 'var(--demo-neutral)', 'var(--demo-warn)']}
  title="Conformance results by status"
/>

Custom height

Criteria by WCAG principle

Bar chart, 4 points. Perceivable to Robust. Values from 6 to 24.

Show data table

<BarChart
  data={[...]}
  height={240}
  title="Criteria by WCAG principle"
/>

Stacked, with selection

Pass series and values with stacked (or grouped). With onSelect, bars become toggle buttons; selecting a bar selects its whole category.

Sales by region (select a quarter)

Bar chart, 2 series, 6 points. Q1 to Q3. Values from 8 to 15.

NorthSouth

Show data table

Nothing selected

<BarChart
  data={[{ label: 'Q1', value: 0 }, { label: 'Q2', value: 0 }, { label: 'Q3', value: 0 }]}
  series={['North', 'South']}
  values={[[12, 8], [15, 11], [9, 14]]}
  stacked
  title="Sales by region (select a quarter)"
  selectedIndex={selected}
  onSelect={setSelected}
/>

Accessibility

• A role="figure" named by the visible title and described by a generated summary (chart type, series and point counts, range).
• The SVG is a role="group" with aria-roledescription="chart"; no graphics-* roles.
• Each bar is labelled {x}: {y}, 2 of 4 (stacked/grouped: {series}, {x}: {y}, 2 of 4, inside a role="group" per series). With onSelect, selectedIndex or a click handler, marks are role="button" with aria-pressed; otherwise they’re static role="img".
• Stacked and grouped bars select a whole category.
• A visible Show data table button (aria-expanded) reveals a real table captioned Data for {title}, with th scope headers and values run through formatValue.
• Escape (inside the chart only) hides the tooltip and clears the selection, announcing the cleared selection in a polite live region; it doesn’t close a surrounding dialog.
• Animations stop under prefers-reduced-motion. In forced-colours mode bars use system colours; in stacked and grouped charts, series after the first are outlined with their legend line’s dash pattern.

Key	Action
← / → (↑ / ↓ when horizontal)	Previous / next mark
Home / End	First / last mark
PageUp / PageDown	Back / forward 10 marks
↑ / ↓ (stacked: ↑ climbs the stack; ← / → when horizontal)	Previous / next series
Tab	Leave the chart (one tab stop)
Enter / Space	Toggle selection (interactive marks)
Escape	Hide the tooltip and clear selection

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
data	BarDatum[]	—	Required. { label, value } per category.
colors	string[]	series palette	Colour per bar (or per series).
direction	“vertical” | “horizontal”	“vertical”	Bar direction.
series	string[]	—	Series names for stacked/grouped bars.
values	number[][]	—	values[category][series] for stacked/grouped bars.
stacked	boolean	false	Stack series.
grouped	boolean	false	Group series side by side.
xLabel	string	—	X-axis title.
yLabel	string	—	Y-axis title.
grid	“horizontal” | “vertical” | “both” | “none”	“horizontal”	Grid lines.
formatValue	(value: number) => string	Intl.NumberFormat	Formats values in ticks, marks and the table. Defaults to Intl.NumberFormat(labels.locale).
height	number	200	Plot height in px (horizontal: 36px per bar, min 120).
aspectRatio	number	—	Width ÷ height, instead of height. The plot box is sized in CSS either way, so server-rendered and hydrated layouts match.
onBarClick	(datum, index, seriesIndex?) => void	—	Makes bars buttons.
selectedIndex	number | null	—	Controlled selection (category index).
onSelect	(index | null) => void	—	Makes bars buttons; called on toggle and Escape.
title	string	—	Required. Visible title: names the figure and captions the data table.
hideTitle	boolean	false	Hide the title visually. It still names the chart for assistive technology.
labels	Partial<ChartLabels>	English	Generated strings and the number locale. See Accessibility.
dataTable	“disclosure” | “visually-hidden”	“disclosure”	How the data table is offered.
exportRef	Ref<ChartExportHandle>	—	SVG/PNG export. See Exporting charts.
className	string	—	Class on the figure.