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.
- encodes
- inked fraction of the word's own glyph extent
- precision
- medium
- nodes
- 2 (+1 numeral)
FillWord answers "how far along is this named task?" by making the label be the bar. A muted word is overlaid with an accent copy of itself, clipped to the value fraction of the word's own inked extent — so 50% visually bisects the word. The fill is a percentage of the glyphs you see, never of a hidden wider track. It trades some precision for a read that needs no separate label.
Install
import { FillWord } from "@microcharts/react/fill-word";<FillWord word="uploading" value={0.62} />Try it
When to use it
- Good for — a labelled progress read in a sentence or cell, a sync/upload status where the label names the task, or a quota/TTL where the word is the metric.
- Avoid for — precise percentages (Progress), trends (Sparkline), or many parallel bars (MiniBar).
Sizing
Variants
Edge cases
At 0% the word is entirely the muted track; at 100% it is entirely accent ink — both ends are honest limits of the same clip, not a special case.
An empty word renders nothing and reports "No data." — there is no label to be the bar.
Four homes
Why this default
Fill (not drain) is the default because progress is the ninety-percent case — a word filling as a step completes.
mode="drain" empties the ink from the left as the value rises, the remaining-time story that fill cannot tell (TTLs,
expiring sessions). Because glyph ink is uneven, fine reads are ±5% — the fill edge lands between letters, not on an
exact tick. When you need the number, add label="value" for the percent alongside, or reach for Progress when
precision is the point.
Accessibility
The accessible name names the task and its state — "storage: 40% complete." — or, in drain mode, where value is
the fraction already drained, "expiring: 30% remaining." for value={0.7}. An empty word reads "No data." The
interactive entry glides the ink edge with a reduced-motion-gated clip-path transition and announces changes through a
polite live region, throttled to at most once a second so a streaming value never spams.
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.
Hover or focus also reveals the reading itself in a floating chip, for the sizes and label modes where the mark
does not print it; readout={false} drops the chip and keeps everything else.
Props
| Prop | Type | Notes |
|---|---|---|
| word* | string | The text that is the chart. |
| value* | number | Fraction 0–1 (clamped). |
| mode | "fill" | "drain" | fill grows the ink (complete); drain empties it (remaining / TTL). |
| label | "none" | "value" | Append the percent numeral after the word. |
| fontSize | number | Word type size in viewBox units (default 12) — here the word 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.