SegmentedBar
React segmented bar chart — part-to-whole as adjacent segments in one bar. Tiny accessible SVG microchart; RSC-safe static or /interactive.
SegmentedBar answers "what is this made of, and in what proportions?". Segments always sum to the full bar; past
maxSegments the tail rolls into a labeled "Other" — nothing is silently dropped. A flat bar beats a donut of the same
data at every size we ship.
Install
import { SegmentedBar } from "@microcharts/react/segmented-bar";// mix — real values under “Sample data” below<SegmentedBar data={mix} title="Browser share" />Sample data
const mix = [ { label: "Chrome", value: 620 }, { label: "Safari", value: 240 }, { label: "Firefox", value: 90 }, { label: "Edge", value: 30 }, { label: "Arc", value: 20 },];Try it
When to use it
- Good for — traffic mix per table row, composition in KPI cards.
- Avoid for — precise cross-row comparison (MiniBar) or negative parts (Waterfall).
Sizing
Variants
label="value" follows format/locale — 12400 reads "12.400" under de-DE rather than the English "12,400".
label="percent" is unaffected: the largest-remainder shares are always plain integers, never locale-formatted, because
a percent point is the same everywhere.
Edge cases
Past maxSegments (default 5) the smallest categories merge into a labeled "Other" — nothing is dropped, only rolled
up, and the interactive entry announces its member count. A single category still renders as one full-width, 100%
segment rather than a special-cased bare bar. Negative values can't exist in a part-to-whole, so they're excluded from
the bar entirely (not clamped to zero) and the component logs a dev warning steering toward Waterfall.
Four homes
Why this default
Data order is the default — inherent sequences (funnel-like stages, weekday mixes) carry meaning that ranking destroys. Summary percents use largest-remainder rounding so they always sum to exactly 100; negative values are excluded with a dev warning (a part-to-whole cannot contain negative parts — use Waterfall).
Accessibility
The accessible name is the full composition — "Chrome 62%, Safari 24%, Firefox 9%, Edge 3%, Other 2%." The interactive entry roves segments; the Other segment announces its member count ("Other: 2%, 2 categories.").
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 }[] | Parts of the whole. |
| maxSegments | number | Rollup threshold — the tail becomes a labeled Other. |
| order | "data" | "desc" | Preserve inherent sequences or rank the composition. |
| label | "none" | "percent" | "value" | Centered per segment (deterministic drop-out; default percent). |
| colors | string[] | Per-segment colours, cycled; overrides --mc-cat-N. Other stays neutral. |
| 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.
Related charts
MicroScatter
React micro scatter chart — 2-D scatter with honest Pearson r in the summary. Tiny accessible SVG microchart; RSC-safe static or /interactive.
HistogramStrip
React histogram strip chart — mode, spread, and skew from raw observations in uniform bins. Tiny accessible SVG microchart; RSC-safe static or /interactive.