SproutRow

SproutRow answers "how mature or healthy is each item in a small set?" Each item is 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 legend. The stages are discrete and there are exactly four; there are no half-stages, because a growth metaphor must not fake continuity.

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" />

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

When to use it

• Good for — account or project maturity across a small set, a health column in a portfolio table, or per-item lifecycle in a KPI card.
• Avoid for — continuous values (MiniBar), trends (Sparkline), or more than about twelve items.

Sizing

Variants

Edge cases

Empty data draws just the frame. A null value renders only the soil tick — visibly distinct from a seed, which is stage 0 and gets its own glyph. Values outside [0, 3] round and clamp to the nearest real stage (seed or bloom) rather than drawing an out-of-bounds or fractional glyph.

Four homes

Why this default

Labels are off by default because the row usually sits beside its own row label, and at micro scale the glyphs alone carry the ordering. The one-line key — seed → sprout → leaf → bloom — appears once above the demos, and after that the height does the work. A null value is a real gap: it draws only the soil tick, distinct from a seed, because "no data yet" is not "just planted". Presets recolor the glyphs but never reshape a stage; the four stages are fixed and never interpolated.

Accessibility

The accessible name summarizes the row — "4 items; 1 at bloom, 1 at seed." The interactive entry roves the items with ←/→ (or hover), announcing each as "Acme: bloom, stage 4 of 4." — the stage name plus a 1-of-4 index — and reads "…: no data." for a missing item. 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 or press Escape. On touch, a tap pins and a drag scrubs.

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.