BarChart

Basic

Pass data as an array of { label, value } objects. Colours default to the interactive palette or can be set per bar.

Category	Value
Pass	42
Fail	8
N/A	12
To do	24

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(--color-success)', 'var(--color-danger)', 'var(--color-inactive)', 'var(--color-warning)']}
  aria-label="Conformance results by status"
/>

Custom height

Category	Value
Perceivable	18
Operable	24
Understandable	12
Robust	6

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

Accessibility

• SVG has role="img" with aria-label
• Each bar is focusable with a descriptive aria-label (e.g. “Pass: 42”)
• Arrow keys navigate between bars
• A hidden <table> provides the same data for screen readers

Props

Prop	Type	Default	Description
data	BarDatum[]	—	Array of { label: string, value: number }
colors	string[]	Interactive palette	Colours per bar (CSS values or custom properties)
height	number	200	Chart height in pixels
aria-label	string	—	Required. Describes the chart for screen readers.
className	string	—