PictogramRow
PictogramRow prints a count as a row of same-size units, filled and hollow, that a reader can tally.
- encodes
- filled-unit count
- precision
- high — it is the number
- nodes
- 1 per unit (total ≤ 20 documented)
- collection
- Core
●●●○○ — three of five units filled, a count a reader can verify by counting. Filled and hollow differ in shape as well as opacity, and PictogramRow keeps every unit the same size: the glyph never scales with the value.
Install
import { PictogramRow } from "@microcharts/react/pictogram-row";<PictogramRow value={5} total={8} title="Committee seats held" />Try it
- hover · rove · click…
Step the count — each change announces the new figure politely.
import { PictogramRow } from "@microcharts/react/pictogram-row/interactive";<PictogramRow value={5} total={8}/>When to use it
Use it for seats, slots, and ratings in a sentence, and for capacity rows in tables. Past 20 units counting fails, and continuous ratios are not a count: use Progress for both.
Sizing
Variants
The default clips the partial unit rather than rounding it away, and draws it as a true circular segment instead of a
clipPath — generated ids would break server-render determinism. Use fractional="round" where a partial unit is
meaningless.
Edge cases
A total of 0 (or non-finite) draws nothing and the summary is "No data.", since there is no row to count. A negative
value renders every unit hollow, and the summary states the true number ("-2 of 4.") rather than clamping to 0. A value
past the total fills every unit, and never draws more than total units, but the summary keeps the true count ("9 of
8.") and dev-warns, so the overflow is never hidden.
Four homes
The oversight committee holds of its 8 seats — a working majority.
| Studio A | 3 of 6 | |
| Studio B | 6 of 6 | |
| Studio C | 1 of 4 |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
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, press Escape, or
press outside the chart. 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.