PictogramRow
React pictogram row chart — counts as a row of pictograms you can tally at a glance. Tiny accessible SVG microchart; RSC-safe static or /interactive.
PictogramRow answers "how many of the N units are filled?" — ●●●○○ — counts a human can verify by counting. Filled vs hollow is a shape difference too, never opacity alone, and unit size is constant: scaling glyphs with value is the classic pictogram lie this component refuses to tell.
Install
import { PictogramRow } from "@microcharts/react/pictogram-row";<PictogramRow value={5} total={8} title="Committee seats held" />Try it
When to use it
- Good for — seats, slots, and ratings in a sentence; capacity rows in tables.
- Avoid for — more than 20 units (counting fails; use Progress) or continuous ratios (Progress).
Sizing
Variants
Edge cases
A total of 0 (or non-finite) draws nothing and the summary is "No data." — there is no meaningful row to count. A
negative value renders every unit hollow, and the summary still states the true number ("-2 of 4.") rather than clamping
to 0. A value past the total fills every unit — never more than total units drawn — but the summary keeps the honest
count ("9 of 8.") with a dev-time warning, so the overflow is never hidden.
Four homes
Why this default
Clip over round — the partial unit is real data, drawn as a true circular segment (not a clipPath, which would need
generated ids that break server rendering determinism). Overflow renders all units filled but the summary keeps the true
numbers ("9 of 8.") with a dev warning; the chart never silently caps the figure.
Accessibility
The accessible name is the count — "3 of 5." — with the context noun coming from your title ("Committee seats
held. 3 of 5."). The interactive entry re-announces when the value changes, and roving the units announces each one on
its own: on the 5-of-8 demo at the top of this page, the fourth unit says "Unit 4 of 8 — filled." A unit reads as empty,
filled, or, for a genuinely partial one, the percentage it holds.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| value* | number | Filled units (may be fractional). |
| total* | number | Unit count. |
| shape | "dot" | "square" | Squares pack tighter in table cells. |
| fractional | "clip" | "round" | Clip shows the true partial unit; round for seat-like units. |
| renderPoint | (unit) => ReactNode | Custom unit glyph (star ratings) — the one sanctioned customization. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.