Meter
Progress meter in bar or gauge variant with threshold coloring.
Category: chart · WCAG 2.1-AA · chart, meter, gauge, progress, data-viz
Variants
- bar
- gauge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value |
label | string | — | Text label for the control. |
min | number | 0 | Minimum allowed value. |
max | number | 100 | Maximum allowed value. |
variant | 'bar' | 'gauge' | bar | Selects the visual style variant. |
thresholds | MeterThresholds | — | Color breakpoints |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | — | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
Design tokens
--cascivo-chart-1
When to use
- Showing a rated or gauged value within a known min/max range
- Surfacing threshold-based status (e.g. CPU, disk, score) as a bar or gauge
When not to use
- Showing task completion progress — use a ProgressBar
- Comparing a value against a target with range bands — use Bullet
Examples
Basic meter
import { Meter } from '@cascivo/charts'
<Meter value={72} label="CPU usage" />