SegmentedBar
SegmentedBar shows what something is made of as adjacent segments that fill one bar.
- encodes
- segment length in a fixed bar
- precision
- medium-high
- nodes
- ≤ 6 + labels
SegmentedBar splits one bar into adjacent segments, one per labeled category, that always sum to the whole: the read is
what a thing is made of, and in what proportions. Segments keep your data order by default, because sequences like
funnel stages and weekday mixes carry meaning that ranking destroys; order="desc" ranks them when they have none. Past
maxSegments the tail rolls into a labeled "Other" rather than being dropped, and summary percents use
largest-remainder rounding so they sum to exactly 100.
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
Use it for a traffic mix per table row or composition in a KPI card. For precise cross-row comparison use MiniBar; for negative parts use Waterfall. This is also the replacement for the pie chart the catalog doesn't ship — see Design notes.
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. A part-to-whole cannot contain negative parts, so negative values are excluded
from the bar entirely (not clamped to zero) and the component logs a dev warning steering toward Waterfall.
Four homes
Accessibility
The accessible name is the full composition: "Chrome 62%, Safari 24%, Firefox 9%, Edge 3%, Other 2%." The interactive entry roves the segments, announcing each one's share and value. The Other segment adds the total it stands for and how many categories were folded into it ("Other: 2%, 20 over 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.