FatDigits
FatDigits prints the exact number and encodes its magnitude tier as font weight.
- encodes
- the numeral + redundant font-weight tier
- precision
- high
- nodes
- 1 (value) / ≤ len (digit)
FatDigits renders the exact number and maps its magnitude to font weight: five ordinal tiers across your domain, or
three with tiers={3}. The weight is a redundant second channel, so the large values in a dense column pop
preattentively before you read any of them. Five is the most weight steps that stay discriminable at text size. Weight
is never the primary read, since it is ordinal and coarse and the numeral is right there. Always pass a domain:
without one a lone number has no tier to sit in and renders at the middle weight.
Install
import { FatDigits } from "@microcharts/react/fat-digits";<FatDigits value={1204} domain={[0, 2100]} title="Revenue" />Try it
When to use it
Use it 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. For trends use Sparkline, for proportions Progress, and for comparisons MiniBar.
Sizing
Variants
encode="digit" weights each digit by its own magnitude instead, a redundancy that helps you scan long ids and amounts.
The idea is adapted from FatFonts, which encodes magnitude as glyph ink area using a custom font; shipping a font would
add a dependency, so weight tiers on the inherited font carry the ordinal here.
format also takes Intl.NumberFormatOptions, and the numeral follows the locale's own grouping and decimal marks.
Edge cases
A non-finite value renders nothing, neither numeral nor weight, and reports "No data." rather than guessing a tier. On a font without many weights the browser snaps to the nearest available face, so fewer of the tiers stay visually distinct.
Four homes
Accessibility
The accessible name is the exact value and its tier: "1,204 — tier 3 of 5." In digit mode it is the number alone, 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). |
| fontSize | number | Numeral type size in viewBox units (default 14) — here the numeral is the mark, so this sizes the chart. |
| 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.