BubbleRow
A row of circles with area proportional to value, for a few magnitudes where the number is printed alongside.
- encodes
- circle area (r ∝ √value)
- precision
- low — for precise comparison, use MiniBar
- nodes
- 2 per bubble (n ≤ 8)
- collection
- Expressive
BubbleRow sizes up a handful of magnitudes against each other: one circle per item, with area (not width)
proportional to value. That is r ∝ √value, with no exceptions, since a linear-radius map would overstate every
difference by roughly its square. Area is the weakest common channel, so this is the catalog's low-precision exemplar:
for a precise comparison, use MiniBar. The value numerals are on by default, because a bubble twice the diameter
is four times the area and the eye can't reliably invert that. The LOW precision rating and the MiniBar steer are
printed in the catalog, in /catalog.json, and in this page's header.
Install
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 },];Try it
- hover · rove · click…
Hover or arrow ←/→ across the bubbles — each announces its exact value, the number the low-precision area can't carry.
import { BubbleRow } from "@microcharts/react/bubble-row/interactive";// regions — real values under “Sample data” below<BubbleRow data={regions}/>Sample data
const regions = [ { label: "EMEA", value: 1240 }, { label: "AMER", value: 890 }, { label: "APAC", value: 560 }, { label: "LATAM", value: 210 },];When to use it
Use it for a few magnitudes with physical presence in a sentence, a market-size or segment impression in a KPI card, or
an editorial callout that prints the number too. For precise comparison use MiniBar; for trends, Sparkline. Keep it
under about eight items.
Sizing
Variants
There is no sorting prop. The row renders in your data's order, so sort the data yourself when you want a ranked row.
Edge cases
Empty data draws just the frame with "No data." as the summary. A null value keeps its slot with a small presence ring
and drops its numeral: it is neither removed from the row nor drawn as a zero-radius circle.
Four homes
Market size by region — EMEA leads at 1.24B.
| EMEA | 1.24B | |
| AMER | 890M | |
| APAC | 560M |
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 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, press Escape, or
press outside the chart. 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. |
| gap | number | Gap between bubbles in viewBox units (default 2). |
| fontSize | number | Type size of the value numerals, 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.