IconArray

IconArray answers "how likely is this, really?". A stated rate becomes countable: filled units in a fixed N-unit grid, with the denominator visible. Two moves kill denominator neglect — the ratio label and the fixed grid. Fill order is contiguous reading-order (scattered is harder to count), and there are no partial-unit fills ever: a sub-unit rate is flagged, never faked.

Install

import { IconArray } from "@microcharts/react/icon-array";<IconArray value={0.15} total={20} title="Adverse events" />

Try it

When to use it

• Good for — risk in a sentence, uptake / adoption rates, lay-audience probabilities.
• Avoid for — a trend (Sparkline) or a full distribution (QuantileDots).

Sizing

Variants

Edge cases

A rate of exactly 0 draws every unit hollow. A rate that is real but rounds to 0 whole units (note: "sub") still shows a hollow grid but the summary says so explicitly — never a fractional unit standing in for "almost none." value is clamped to [0, 1] and non-finite input renders as 0, so a bad upstream number never breaks the grid.

Four homes

Why this default

total={20} and label="ratio" are the default pairing because "3 in 20" reads faster and more honestly for a lay audience than "15%" — the denominator stays visible instead of being computed in the reader's head. Units fill in reading order from the top-left, never scattered: medical-risk-communication research finds scattered fills measurably harder to count at a glance, and counting is the whole point of this chart. There is no partial-unit fill — a 37% rate is never drawn as a unit that's 37% full, because a sub-pixel sliver of color is a precision claim this chart doesn't make.

Accessibility

The accessible name states the count and the rate — "3 in 20. About 15%." — and degenerate rates say so plainly ("0 in 20", "20 in 20 — all."). The interactive entry roves the grid in reading order with the arrow keys (2-D, row-major) and announces each unit's state plus the running count: "Unit 1 of 20 — filled. 3 of 20 filled."

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

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.