SproutRow
SproutRow shows each item in a small set at one of four growth stages, from seed to bloom.
- encodes
- ordinal growth-stage glyph (height monotonic)
- precision
- high
- nodes
- n + 1 (+ n labels)
- collection
- Expressive
Six accounts sit in a portfolio table and each one is somewhere between just-signed and fully adopted. SproutRow gives each item one of four growth stages (seed → sprout → leaf → bloom), and the glyph height is strictly monotonic, so taller always means further along and the ordering reads without the key. The four stages are fixed and discrete: no half-stages, no interpolation, and presets recolor the glyphs without reshaping one.
The key, shown once: seed → sprout → leaf → bloom.
Install
import { SproutRow } from "@microcharts/react/sprout-row";// accounts — real values under “Sample data” below<SproutRow data={accounts} title="Account health" />Sample data
const accounts = [ { label: "Acme", value: 3 }, // 3 = bloom { label: "Beta", value: 2 }, // 2 = leaf { label: "Gamma", value: 3 }, { label: "Delta", value: 1 }, // 1 = sprout { label: "Echo", value: 0 }, // 0 = seed { label: "Foxx", value: 2 },];Try it
- hover · rove · click…
Hover or arrow ←/→ across the row — each item announces its stage (seed → sprout → leaf → bloom), and a ring lifts the focused glyph. Taller means further along, so the ordering reads without the key.
import { SproutRow } from "@microcharts/react/sprout-row/interactive";// accounts — real values under “Sample data” below<SproutRow data={accounts}/>Sample data
const accounts = [ { label: "Acme", value: 3 }, // 3 = bloom { label: "Beta", value: 2 }, // 2 = leaf { label: "Gamma", value: 3 }, { label: "Delta", value: 1 }, // 1 = sprout { label: "Echo", value: 0 }, // 0 = seed { label: "Foxx", value: 2 },];When to use it
Use it for account or project maturity across a small set, a health column in a portfolio table, or per-item lifecycle in a KPI card. Continuous values belong in MiniBar and trends in Sparkline; past about twelve items the row stops being readable.
Sizing
Variants
Labels are off by default, since the row usually sits beside its own row label and the heights carry the ordering.
label="value" prints each item's stage number instead.
Edge cases
Empty data draws just the frame. A null value renders only the soil tick, visibly distinct from a seed: seed is stage
0 and gets its own glyph, and "no data yet" is a different state from "just planted". Values outside [0, 3] round and
clamp to the nearest real stage, seed or bloom, instead of drawing a fractional or out-of-bounds glyph.
Four homes
Account health this week — two at bloom, one still seed.
| Acme | bloom | |
| Beta | leaf | |
| Gamma | bloom |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
Accessibility
The accessible name summarizes the row: "4 items; 1 at bloom, 1 at seed." The interactive entry roves the items with ←/→ or hover and announces each as "Acme: bloom, stage 4 of 4.", the stage name plus a 1-of-4 index. A missing item reads "…: no data." A ring lifts the focused glyph.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again, press Escape, or
press outside the chart. On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label, value }[] | value = stage 0–3. |
| labels | boolean | Category labels under the slots. |
| label | "none" | "value" | Print the stage number above each glyph. |
| step | number | Horizontal spacing between glyph slots (default 16; widens for labels). |
| fontSize | number | Type size of the value and stage labels, in viewBox units. Defaults from `height`. |
| 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.