data-display / stable

BarChart

Single-series cobalt bars with a zero baseline, keyboard tooltips and an accessible data table.

LIVE PREVIEW

Loading preview…

When to use

Compare categories in workflow order or values over a short sequence.

Consider an alternative

Repeating headline numbers already shown in StatCard.
Multiple series on the same categories — use GroupedBarChart.
Stacked values or negative values.

Import

import { BarChart } from '@revido-llc/kit';

Keyboard interaction

Tab — focus each bar and reveal its label and value
Escape — dismiss the tooltip

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


data (required)	readonly { label: string; value: number; }[]	—	One non-negative quantitative series, in the intended axis order.
highlight	string	—	Label of the one emphasized bar. Defaults to the first maximum.
orientation	"vertical" \| "horizontal"	"vertical"	Horizontal for longer category labels; vertical for short sequences.
valueFormat	((value: number) => string)	—	Formats axis ticks, direct labels, tooltips and the accessible table.
children	ReactNode	—
className	string	—

Examples

Orientations

<BarChart data={[{ label: "Sprint 1", value: 28 }, { label: "Sprint 2", value: 36 }]} highlight="Sprint 2" title="Sprint velocity" />

Projects by status

<BarChart data={[{ label: "Planning", value: 3 }, { label: "In progress", value: 8 }, { label: "Complete", value: 2 }]} orientation="horizontal" highlight="In progress" title="Projects by status" />

Zero values and formatting

<BarChart data={[{ label: "Sprint 1", value: 0 }, { label: "Sprint 2", value: 24 }]} valueFormat={(value) => `${value} SP`} title="Story points delivered" />

No measurements

<BarChart data={[]} title="Projects by status" />

Literal anatomy

Static component anatomy; bind events in the consuming app.

<BarChart aria-label="Work by stage" data={[{ label: "Planned", value: 12 }, { label: "Complete", value: 8 }]} />