One bounded number, read at a glance

A radial dial for capacity, usage, or a score against a target. Like Sparkline it is dependency-free SVG with no client JavaScript, so it renders from a Server Component. It wears the same card, header, and centre typography as the rest of the chart family, and bare strips the chrome when it sits inside a panel. Thresholds recolour the dial through the status roles as the reading crosses them.

The chart card

By default the gauge is a chart like any other: the shared card, the shared header, the family's light dial numeral over a caption.

Cluster memory

Rolling five-minute average

82Memory

Thresholds

The point of a dial over a plain number: the colour carries the judgement. These three share one threshold set, amber at 70 and red at 90, and recolour themselves. Shown bare, as they would sit inside a panel.

Healthy
46CPU
Warning
78CPU
Critical
94CPU

Tones

Without thresholds, the tone is set directly. Accent follows the chart palette's lead colour; the status tones use the border tokens, which hold their hue in both themes; neutral recedes to secondary text.

Accent
64Default
Positive
64Passing
Warning
64Degraded
Error
64Failing
Neutral
64Idle

Formatting

The centre reading goes through formatValue, so units, precision, and locale are the consumer's call. The formatted string is also what assistive technology announces.

Score out of ten
7.4Quality score
Percentage
99.98%Uptime
Dial only

Sizes

Size and stroke width are plain pixel geometry; the default is a 120px dial with a 12px arc, matching the ring weight of the radial chart. The centre pair stays on the sub-display and caption ramps, so the smallest dials read best with the value alone or hidden.

80px
120px, default
64Memory
180px
91Capacity