MeterGroup

A segmented horizontal bar that visualises proportions within a total. Each segment represents a category, sized by its value. Pair it with MeterGroupLegend to show labels and values.

Use non-negative segment values and a positive total. In 0.0.34, max below the sum does not clamp segment proportions; it only removes the remainder. Size is captured at initialization (small wins over compact); legend orientation is also captured. Choose these before mounting. MeterGroup forwards extra HTML attributes, while MeterGroupLegend does not. Built-in click handlers are pointer-only; provide real buttons in custom legend content for keyboard selection.

Pass an array of MeterItem objects. The bar fills to the sum of all values — no max needed.

Set max to show a fixed total. Values below max render the remaining space in a neutral fill. The value snippet in MeterGroupLegend lets you add a custom suffix.

Use onsegmentclick and onitemclick to respond to interaction. Both receive the full MeterItem object.

Add the vertical prop to both components. Set a height on MeterGroup via class; the legend stacks its items with values aligned to the right.

Use compact or small to reduce the bar thickness and legend text size.

The segment snippet renders inside each proportional segment. The legend item snippet replaces its swatch, label and value content, but not the li wrapper. With this override, showValues and the value snippet no longer control the content. A real button provides explicit keyboard activation.