MeterStack

Patterns

Segmented Health Indicator

When to use:

• a status metric is easier to read as several component parts

Composition notes:

• keep segment ordering meaningful
• keep nearby labels if colors alone are insufficient

Trade-offs:

• expressive
• harder to interpret than a single bar without context

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

type Period = '24h' | '7d' | '30d';

const minutesByPeriod: Record<Period, { healthy: number, degraded: number, outage: number }> = {
  '24h': { healthy: 1380, degraded: 52, outage: 8 },
  '7d': { healthy: 9640, degraded: 410, outage: 30 },
  '30d': { healthy: 42310, degraded: 690, outage: 200 },
};

const periods: Period[] = ['24h', '7d', '30d'];

Password Strength Breakdown

When to use:

• a score is represented as discrete segments

Composition notes:

• keep the segment count stable
• pair with textual strength labeling

Trade-offs:

• intuitive segment-based feedback
• can be mistaken for exact validation without copy

import { Button, HelperText, Label, MeterStack, MeterStackSegment, TextField, TextFieldInput } from '@vega-ui/react';
import { CSSProperties, FormEvent, useId, useState } from 'react';

const levels = [
  { label: 'Too weak', color: 'var(--color-red-500)' },
  { label: 'Weak', color: 'var(--color-red-500)' },
  { label: 'Fair', color: 'var(--color-orange-500)' },
  { label: 'Good', color: 'var(--color-amber-500)' },
  { label: 'Strong', color: 'var(--color-green-500)' },
];

export default function PasswordStrengthBreakdown() {

Revenue Or Quota Split

When to use:

• one total should be shown as several contributing parts

Composition notes:

• make segment values sum to the intended total
• use color intentionally

Trade-offs:

• good comparative summary
• tiny segments may need labels outside the component

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

const channels = [
  { id: 'web', label: 'Web store', amount: 184200, color: 'var(--color-blue-500)' },
  { id: 'ios', label: 'iOS app', amount: 121700, color: 'var(--color-purple-500)' },
  { id: 'android', label: 'Android app', amount: 64300, color: 'var(--color-green-500)' },
  { id: 'partners', label: 'Partners', amount: 29800, color: 'var(--color-orange-500)' },
];

export default function RevenueSplitSummary() {
  const titleId = useId();

Comparison

Quick Decision Rule

Use MeterStack when one metric is best understood as several colored parts. Use Meter or Progress when a single continuous bar communicates the value more clearly.

MeterStack vs Meter

Use MeterStack when:

• segmented composition is the real message

Use Meter when:

• one continuous bounded value is enough

MeterStack vs Progress

Use MeterStack when:

• the UI is showing composition breakdowns

Use Progress when:

• the UI is showing one task's completion over time

Choose This Component When

• one metric is composed of several meaningful segments
• segment ordering and color convey real information
• the breakdown itself is more important than one aggregate value

Do Not Choose This Component When

• one continuous bar is enough
• segment meaning is unclear or purely decorative

Troubleshooting

The Meter Looks Wrong Even Though The UI Renders

Symptom

The segmented bar renders, but the proportions do not match the intended metric.

Likely Cause

Segment values or root max do not reflect the real data model.

How To Verify

• add up the segment values
• compare them with the root value and max

Fix

Normalize segment values in the parent feature before rendering the stack.

Tiny Segments Are Impossible To Understand

Symptom

Some segments are visible but too small to interpret.

Likely Cause

Too many small parts were encoded without external labels.

How To Verify

• test the component at real production widths

Fix

Reduce segment count, widen the component, or add labels/tooltips outside the meter.

Color Differences Are Carrying All The Meaning

Symptom

The meter is only understandable if users can perceive the color mapping perfectly.

Likely Cause

There is no adjacent explanatory copy or legend.

How To Verify

• remove color mentally and check whether the structure still makes sense

Fix

Add labels or nearby text that explain the segment categories.