Data Display
Segmented Bar
Horizontal bar split into proportional colored segments toward a total, with optional legend.
A single horizontal bar split into proportional colored segments — memory allocation (active / cache / free), disk usage by bucket, a request mix. Unlike MetricBar (one fill), this stacks many segments toward a total, showing any leftover as track. Turn on legend to list each segment with its value.
Import
tsx
1import { SegmentedBar } from "@yuhuanowo/yunui";Basic
Give it segments; the bar fills each proportionally to their sum.
Segments
Total and remainder
Pass a total larger than the segment sum to show free space as track — ideal for "X of Y used".
Legend
Active22 GB
Cache12 GB
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| formatValue | ((value: number) => ReactNode) | — | Format a segment value for the legend (e.g. bytes → "1.2 GB"). |
| height | number | 8 | Bar thickness in px. |
| label | string | — | Accessible name for the whole graphic, e.g. "Storage used: 62%". Without it the element is treated as decoration rather than being announced as an anonymous image — an unnamed `role="img"` tells a screen reader there is a picture here and nothing about it. |
| legend | boolean | false | Show a legend of segments with their values below the bar. |
| segments* | BarSegment[] | — | The segments, drawn left → right. |
| total | number | — | Axis total. Defaults to the sum of segment values; the remainder shows as track. |