Gauge

Chart
A semicircular dial: a 180 degree top arc (muted track plus a tone-colored value arc) for a 0-100 value, the percent readout in the open center of the semicircle, and an optional label below the graphic.
src/charts/gauge
View in Charts

Playground

Every control sets a real prop of GaugeProps. The JSX below updates as you go.
Props
value
number
72
label
string
Tone
pick one
JSX · GaugeProps
<Gauge value={72} label="of Q4 adoption goal" primary />

Variants

2 examples from src/charts/gauge/gauge.md, each rendered live from its own JSX.
Success tone
<Gauge value={92} success />
Warning tone
<Gauge value={81} warning />

Anatomy

1
Track
2
Fill arc
3
Value
4
Scale labels
Dimmed parts appear only in some states or variants.

Props

9 props on GaugeProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
value *
number
–
The value to display, 0–100.
label
string
–
A short caption beneath the number (e.g. "Uptime").
Tone of the fill arc
pick one
7 props
primary
boolean
false
large
boolean
false
Use the wider 250 px adoption dial.
success
boolean
false
warning
boolean
false
destructive
boolean
false
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
For sizing/composition only.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
image
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Gauge value={72} label="Uptime" />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ion
--sf4
--tx
--tx3

Related components