Waffle chart

A React component in Beamline's Charts & data-vis category.

Units of a whole as a grid of cells by category (seats used of a plan, tickets by channel): a 10×10 grid by default, hatched cells for units whose category was not recorded, the remainder left empty, and a list of categories with counts and shares that highlights its cells on hover or focus.

Use it for

A few shares of a whole that people should be able to count: seats by status, tickets by channel, survey answers.

Not for

Shares over time (area-chart with expanded stacking).
Many small categories (bar-list).
A quota with one used amount (usage-meter).

Anatomy

title, description, table button
grid of cells (rows × columns; each cell is total ÷ cells units)
cells by category in list order, then unmeasured (hatched), then the remainder (empty)
category list (buttons): swatch, name, count, share

Variants

0: rows / columns (10 × 10 by default: one cell per percent)
1: total (a plan size larger than the parts leaves empty remainder cells)
2: unmeasured (units of unknown category)
3: list on or off

States

loading (skeleton)
empty
unmeasured units: hatched cells and a hatched list row
category with a null value: listed as “Not measured”, no cells
active category (its cells lead, the rest dim; the list row is marked)
pinned category (aria-pressed)
table view (count and share per category)
right-to-left: cells fill from the right

Keyboard

Tab moves through the category list; focus or hover highlights a category's cells
Enter or Space pins it (aria-pressed); Escape clears the pin
The grid itself is not focusable: the list carries every number

Motion

Cells fade in once in fill order (one stagger step each); highlight is immediate on arrival. Instant under reduced motion.

Props

Prop	Type	Default	Description
`data`	`WaffleCategory[]`	—	{ key, label, value: number \| null, color? } in fill order.
`total`	`number`	—	The whole; the sum of the parts by default. More than the sum leaves empty remainder cells.
`unmeasured`	`number`	—	Units whose category was not recorded; drawn hatched.
`remainderLabel`	`string`	—	What the empty remainder is called in the list. Default "Remaining".
`unmeasuredLabel`	`string`	—	What the hatched units are called in the list. Default "Not recorded".
`format`	`(value: number) => string`	—	How counts read: "62 seats".
`rows / columns`	`number`	—	Grid size. Default 10 × 10.
`active / defaultActive / onActiveChange`	`string \| null`	—	The pinned category's key.
`list`	`boolean`	—	The category list. Default true.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name (a heading unless hidden) is always its accessible name.
`table`	`boolean`	—	Offer “View as table”. Default true.
`loading`	`boolean`	—	Skeleton of the chart's shape; keeps the frame's size.
`actions`	`ReactNode`	—	Controls beside the legend (range, offset).
`className`	`string`	—	Lands on the figure.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

motion

Import

import { WaffleChart } from "@/components/waffle-chart/waffle-chart";

Get it

Waffle chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent