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.
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.
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. |
| 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.