MeterStack

MeterStack is a compound component for segmented meter displays.

Overview

MeterStack styling is token-driven and intentionally small. The root defines track height, gap, and background, while each segment defines its own proportional width and color.

Public CSS Variables

Storage46 of 64 GB

Variable	Value	Affects
track heightroot		No visible change in this state
track radius ratioroot		No visible change in this state
gap between segmentsroot		No visible change in this state
current aggregate valueroot		No visible change in this state
proportional width calculationsroot and segments		No visible change in this state
segment width sharesegment		No visible change in this state
segment fill colorsegment		No visible change in this state
Radius ratio of a segment.`MeterStackSegment`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root maps size to height, applies --fills-secondary as the base track, and uses flex layout for the segments.

Segment

Each segment computes width from value / max and can override its color with --meter-stack-segment-color.

State And Variant Interaction

size changes the track height
fullWidth sets width to 100%
segment color is per-item rather than root-wide

Examples

Custom blue scale

LTRRTL

custom-blue-scale.tsx · 12 lines

import { MeterStack, MeterStackSegment } from '@vega-ui/react';
import { CSSProperties } from 'react';

export default function CustomBlueScale() {
  return (
    <MeterStack value={0.85} max={1} role='group' aria-label='Traffic by region' size='lg' fullWidth>
      <MeterStackSegment value={0.4} aria-label='Europe' style={{ '--meter-stack-segment-color': 'var(--color-blue-accent-700)' } as CSSProperties} />
      <MeterStackSegment value={0.3} aria-label='North America' style={{ '--meter-stack-segment-color': 'var(--color-blue-accent-500)' } as CSSProperties} />
      <MeterStackSegment value={0.15} aria-label='Asia' style={{ '--meter-stack-segment-color': 'var(--color-blue-accent-300)' } as CSSProperties} />
    </MeterStack>
  );
}

Do Not Override

using segment widths that do not reflect real values
removing contrast between the base track and segments