Gauge
Displays a single metric value within a defined range using radial, arc, or linear visual styles.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Gauge />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
24 tests across 3 files. Auto-generated from the test suite.
When to Use
- Visualize capacity, utilisation, or performance metrics at a glance.
- Show a single KPI (CPU usage, battery level, score) within a min/max range.
- Use Radial for dashboards, Arc for compact metric cards, Linear for inline progress.
- Apply thresholds to automatically shift colour from green → amber → red as values rise.
25%
60%
90%
30%
65%
95%
40%
70%
90%
CPU
RAM
Disk
30%
30
65%
65%
65%
Switch variant to compare Radial, Arc, and Linear shapes.
Low
Med
High
API Reference
Gauge
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | The current value, clamped to Min–Max for both the drawn arc/bar and the announced aria-valuenow. |
| Min | double | 0 | Lower bound of the gauge's range (default 0). |
| Max | double | 100 | Upper bound of the gauge's range (default 100). |
| Variant | GaugeVariant | GaugeVariant.Radial | Visual form: Radial (default, 270° arc with a gap at the bottom), Linear (horizontal bar), or Arc (180° semicircle). |
| Size | int | 120 | Overall pixel size — width for Linear, diameter for Radial/Arc (default 120). |
| StrokeWidth | int | 8 | Thickness in pixels of the track/value stroke (default 8). |
| Label | string? | — | Custom text shown in place of the computed percentage, and used as the meter's aria-label when set. |
| LabelContent | RenderFragment? | — | Custom center/label content — overrides the default text. Drop in a <NumberTicker> (Lumeo.Motion) here for an animated value, instead of duplicating count-up animation in core. (#277) |
| ShowValue | bool | true | When true (default), renders the value/label text centered on (or below, for Linear) the gauge. |
| Color | string | "primary" | Theme color token (without the --color- prefix) for the filled value stroke/bar when no Thresholds match (default "primary"). |
| TrackColor | string | "muted" | Theme color token (without the --color- prefix) for the unfilled track (default "muted"). |
| Thresholds | IReadOnlyList<GaugeThreshold>? | — | Optional value-based color overrides, evaluated highest-threshold-first: the first entry whose Value is <= the current Value wins, falling back to Color when none match. |
| Class | string? | — | Additional CSS classes merged onto the gauge's root element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the gauge's root role="meter" element. |
Related Components
- Progress — Linear and circular progress bars with indeterminate support.
- RingProgress — A clean determinate progress ring optimised for inline use.
- Statistic — Display a single numeric KPI with label and trend.