Charts

BarChart

Compares categories with grouped or stacked bars, vertical or horizontal. Bars grow in once; category labels thin or truncate on narrow screens.

Usage

Use it for:

  • Comparing amounts across categories (teams, months, accounts).
  • Composition per category (stacked).

Avoid it when:

  • Many points over time: use LineChart.
  • A single whole split into parts: use DonutChart.
  • More than ~4 series: split into several charts.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Grouped: planned vs actual hours

0 h100 h200 h300 h400 hDesignEngineeringMarketingSupport
Use the arrow keys to read each value.
Planned and actual hours by team
TeamPlannedActual
Design120 h104 h
Engineering320 h356 h
Marketing90 h72 h
Support150 h161 h

Stacked, horizontal: tasks by status

Horizontal bars suit long category names; the tooltip adds a total for stacks.

01020304050BacklogIn progressIn reviewDone this sprint
Use the arrow keys to read each value.
Tasks by status
StatusFeaturesBugs
Backlog2214
In progress116
In review73
Done this sprint2518

API Reference

BarChart

Generic over the datum type. Horizontal charts default to 32px per category.

PropTypeDefault
data
Datum[]
index
keyof Datum
series
{ key: string; label: string; color?: Color }[]
height
number
240
legend
boolean
series.length > 1
indexLabel
string
stacked
boolean
false
layout
"vertical""horizontal"
"vertical"
label
string
valueFormat
(value: number) => string
grouped digits
className
string
style
CSSProperties
id
string

Accessibility

Keyboard:

  • Tab: focuses the chart (focus ring).
  • → / ↓ and ← / ↑: move to the next / previous data point and show its tooltip.
  • Home / End: first / last point. Escape: hide the tooltip.

ARIA and semantics:

  • The SVG is role="img" named by label, with a description of the keys.
  • A visually hidden <table> (caption = label) holds every value, formatted with valueFormat, for screen readers.
  • Keyboard moves are read by a polite live region ("Mar: Revenue $5,150, Spending $1,808").
  • Series are named in the legend, tooltip and table, so color is never the only key.
  • The entrance animation does not play under reduced motion; the chart renders in its final state on the server.
© 2026 Motion. Internal documentation.