React bubble row chart — circle area for a few magnitudes — honest low-precision part-to-whole. Tiny accessible SVG microchart; RSC-safe static or /interactive.

BubbleRow answers "roughly how do these few magnitudes compare?" with physical presence — a row of circles whose area (not width) is proportional to value. Area is the weakest common channel, so this is the catalog's honest low-precision exemplar: for a precise comparison, use MiniBar. The value numerals are on by default, because a low-precision channel owes the reader the number.

BubbleRow

interactive · 4.5 kB · static · 2.13 kB

Install

Import & usereact/bubble-row

import { BubbleRow } from "@microcharts/react/bubble-row";// regions — real values under “Sample data” below<BubbleRow data={regions} title="Market size" />

Sample data

const regions = [  { label: "EMEA", value: 1240 },  { label: "AMER", value: 890 },  { label: "APAC", value: 560 },  { label: "LATAM", value: 210 },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — a few magnitudes with physical presence in a sentence, a market-size or segment impression in a KPI card, or an editorial callout where the number is printed too.
Avoid for — precise comparison (that's MiniBar), trends (Sparkline), or more than about eight items.

Sizing

Variants

baseline align + labels

Edge cases

empty

a null value

Empty data draws just the frame with "No data." as the summary. A null value still holds its place with a small presence ring (never a zero-radius void, and never skipped from the row) but drops its numeral — a missing figure is visibly present yet explicitly unlabeled, never faked as a zero.

Four homes

Why this default

Value numerals are on by default because area lies quietly — a bubble twice the diameter is four times the area, and the eye can't reliably invert that, so the number keeps the read honest. The radius is always r ∝ √value with no exceptions; a linear-radius map would be a roughly squared lie. There is no sorting prop: the order is your data's order, because reordering is your statement, not the chart's. The LOW precision rating and the MiniBar steer are printed in the catalog, the machine /catalog.json, and this page's header — BubbleRow is the catalog's worked example of an honest low-precision admission.

Accessibility

The accessible name names the extremes — "4 items; largest EMEA at 1,240, smallest LATAM at 210." The interactive entry roves the bubbles with ←/→ (or hover), announcing each one's exact value — "EMEA: 1,240." — the number the area itself can't carry.

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

Prop	Type	Notes
data*	{ label, value }[]	A few non-negative magnitudes.
align	"center" \| "baseline"	center (specimen) or baseline (weights on a shelf).
label	"value" \| "both" \| "none"	value (default), both, or none.
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.