FillWord

FillWord makes the label the bar, so a named task shows its own progress: the word uploading renders with 62% of its glyph ink in accent and the rest muted. 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% bisects the word. The fill is a percentage of the glyphs you see rather than of a hidden wider track. Glyph ink is uneven, so fine reads are ±5%: the fill edge lands between letters, not on an exact tick. Add label="value" for the percent alongside, or use Progress when precision is the point.

Install

import { FillWord } from "@microcharts/react/fill-word";<FillWord word="uploading" value={0.62} />

Try it

When to use it

Use it for a labeled progress read in a sentence or cell, a sync or upload status where the label names the task, or a quota or TTL where the word is the metric. For precise percentages use Progress, for trends Sparkline, and for many parallel bars MiniBar.

Sizing

Variants

Fill is the default mode, since a word filling as a step completes covers most uses. mode="drain" empties the ink from the left as the value rises, which is the remaining-time read fill can't give you: TTLs, expiring sessions.

Edge cases

At 0% the word is entirely the muted track; at 100% it is entirely accent ink. Both ends are limits of the same clip rather than special cases in the code.

An empty word renders nothing and reports "No data.", since there is no label to be the bar.

Four homes

Accessibility

The accessible name gives the task and its state: "storage: 40% complete." In drain mode, where value is the fraction already drained, value={0.7} reads "expiring: 30% remaining." 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 doesn't spam a screen reader.

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

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.