IconArray
IconArray makes a stated rate countable — filled units in a fixed grid, with the denominator on show.
- encodes
- count of filled units in a fixed N-unit grid
- precision
- high — unit-countable
- nodes
- 1 per unit + label
IconArray makes a stated rate countable: it prints 3 in 20 beside a grid of twenty units with three of them filled.
total={20} and label="ratio" are the default pairing because "3 in 20" reads faster for a lay audience than "15%",
and the ratio label plus the fixed grid keep the denominator on the page instead of in the reader's head. Units fill in
contiguous reading order from the top-left: medical-risk-communication research finds scattered fills measurably harder
to count, and counting is the whole point of this chart. There are no partial-unit fills ever. A 37% rate is never a
unit drawn 37% full, and a rate too small to fill one unit is flagged rather than faked.
Install
import { IconArray } from "@microcharts/react/icon-array";<IconArray value={0.15} total={20} title="Adverse events" />Try it
When to use it
Use it for risk in a sentence, uptake and adoption rates, and lay-audience probabilities. For a trend use Sparkline; for a full distribution use 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") also shows
a hollow grid, and the summary says so rather than standing a fractional unit 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
Accessibility
The accessible name gives the count and the rate: "3 in 20. About 15%." Degenerate rates are spelled out too ("0 in 20", "20 in 20 — all."). The interactive entry roves the grid in reading order with the arrow keys (2-D, row-major), announcing each unit's state and 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
| Prop | Type | Notes |
|---|---|---|
| value* | number | The rate, 0–1. |
| total | 10 | 20 | 100 | Denominator / grid size (default 20). |
| label | "ratio" | "percent" | "none" | "3 in 20" (default) reads better than "15%" for lay audiences. |
| shape | "square" | "round" | "dot" | Shared cell vocabulary (default square). |
| positive | "up" | "down" | Polarity — down (fewer is better) flips the fill to the risk tone. |
| 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.