Data & Charts
Gauge
One value against its limit on a half circle, with a needle that swings in and re-aims with a spring.
Usage
Plan usage
0%
742,180 of 1,000,000 requests
Resets in 23 daysForecast 96%
Installation
npm install @wunderui/reactThen import what you need:
import { Gauge, GaugeProps, GaugeSegment } from "@wunderui/react"Examples
Live value
A new reading every few seconds — the needle follows without restarting from zero.
CPU load
api-eu-west-2 · 8 vCPU
0%
5.0 of 8 cores busy
Custom format
A currency number in the centre, a chart colour for the arc and custom end captions.
Cloud budget
October 2026
$0
84% of the monthly budget spent
Compute
$5,120
Storage
$1,860
Network
$1,440
API Reference
| Prop | Type | Default |
|---|---|---|
| value | number | — |
| max | number | 100 |
| label | ReactNode | — |
| format | (value: number, max: number) => ReactNode | share in % |
| minLabel | ReactNode | "0" |
| maxLabel | ReactNode | max |
| color | string | var(--primary) |
| dangerAt | number | — |
| ticks | number | 4 |
| size | number | 240 |
| animate | boolean | true |