FatDigits
React fat digits chart — a number whose weight encodes magnitude tier. Tiny accessible SVG microchart; RSC-safe static or /interactive.
FatDigits answers "which numbers in this dense column are big, before I read them?" The numeral is always the exact
value; font weight is a second, redundant channel — five (or three) ordinal tiers mapped from your domain — so the
large numbers pop preattentively as you scan a column. Weight is never the primary read: it is ordinal and coarse, and
the number is right there.
Install
import { FatDigits } from "@microcharts/react/fat-digits";<FatDigits value={1204} domain={[0, 2100]} title="Revenue" />Try it
When to use it
- Good for — a dense numeric table column you scan for the big ones, a KPI number that should carry its own magnitude, or an amount in a sentence.
- Avoid for — trends (Sparkline), proportions (Progress), or comparisons (MiniBar).
Sizing
Variants
format also takes Intl.NumberFormatOptions — the numeral itself follows the locale's own grouping and decimal marks.
Edge cases
A non-finite value renders nothing (no numeral, no weight) and reports "No data." rather than guessing a tier.
Four homes
Why this default
Value mode with five tiers is the default because scanning a column is the use case, and five is the most weight steps
that stay discriminable at text size. Always pass a domain — without one a lone number has no tier to sit in, so it
renders at the middle weight and means nothing. encode="digit" instead weights each digit by its own magnitude, a
redundancy that helps scan long ids and amounts. This is adapted from the FatFonts idea: the research encodes magnitude
as glyph ink area with a custom font; shipping a font would add a dependency, so weight tiers on the inherited font
carry the ordinal instead — the numeral is always the exact value. On a font without many weights the browser snaps to
the nearest available face, so fewer of the tiers stay visually distinct.
Accessibility
The accessible name is the exact value and its tier — "1,204 — tier 3 of 5." — and in digit mode just the number, since each digit carries its own weight. The interactive entry eases the weight to its new tier on variable fonts (it snaps otherwise) with no layout shift, and announces the value and tier through a polite live region.
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 | The number (always the exact value). |
| domain | readonly [number, number] | Maps value to a weight tier — always pass one. |
| encode | "value" | "digit" | value weights the whole numeral; digit weights each digit by its own magnitude. |
| tiers | 3 | 5 | Weight steps (default 5). |
| 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.
Related charts
FillWord
React fill word chart — a word whose glyphs fill with accent — the label is the bar. Tiny accessible SVG microchart; RSC-safe static or /interactive.
Thermometer
React thermometer chart — progress toward a goal as a vertical fill from zero. Tiny accessible SVG microchart; RSC-safe static or /interactive.