DicePips
DicePips renders a small count of 0–6 as die pips, and shows the exact numeral above six.
- encodes
- canonical pip pattern 1–6 (subitized)
- precision
- high
- nodes
- ≤ 7 (face + 6 pips)
- collection
- Expressive
DicePips prints a small count as a die face: five pips for 5, an empty face for 0. The canonical 1–6 patterns are
subitizable, so you read them without counting. Zero means zero, not missing data. Above six there is no pattern to
subitize, so the face shows the exact numeral instead of inventing a seven-pip layout.
Install
import { DicePips } from "@microcharts/react/dice-pips";<DicePips value={4} title="Severity" />Try it
- hover · click · Enter…
Tap to roll — the pip set cross-fades to the new face and the value is announced through a polite live region. The pips are one value, so there is no cursor to move.
import { DicePips } from "@microcharts/react/dice-pips/interactive";<DicePips value={4}/>When to use it
Use it for a severity or rating 0–6 in a cell, a small count in a sentence, or an incident-severity badge. For counts above six use TallyMarks, for magnitudes MiniBar, and for proportions Progress.
Sizing
Variants
The face outline is on by default because it keeps a lone die legible on any surface. face={false} drops it for a
repeated table column, where the header already frames the column. The second demo is the numeral fallback at
value={9}.
Edge cases
Four homes
Incident severity — rated 4 of 6, elevated but not critical.
| INC-142 | 4 | |
| INC-141 | 2 | |
| INC-140 | 5 |
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 states the value against its range: "4 out of 6." Past six it drops the range and gives the
number alone ("9."). Zero reads "0 out of 6." and an invalid value reads "No data." The interactive entry pops the
pips into place on change — a short scale-up with a per-pip stagger, skipped under prefers-reduced-motion — and
announces the new face through a polite live region. The pips are one value, so there is no cursor to move.
This chart is a single unit, so there is nothing to rove between: a click, tap, Enter or Space selects it
and fires onSelect, and no selection stays pinned. That is the scalar half of the shared
interaction contract.
Props
| Prop | Type | Notes |
|---|---|---|
| value* | number | Integer 0–6 (rounded); above 6 shows a numeral. |
| face | boolean | Draw the die outline (default true). |
| size | number | Die square edge in viewBox units (default 16). |
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.