Data & ChartsPro

Gauge Chart

Gauge for one value on its scale: semi-circle, speedometer, ring or segmented. The arc draws to the value and the number counts up.

Usage

Throughput

Throughput, data table
name	Value
Throughput	72 MB/s

Installation

Gauge Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import { GaugeChart, GaugeChartProps, GaugeChartVariant } from "@wunderui/react"

Examples

Semi Circle Gauge

CPU load

CPU load, data table
name	Value
CPU load	68%

Speedometer Gauge

Throughput

Throughput, data table
name	Value
Throughput	72 MB/s

Ring Gauge

Memory

Memory, data table
name	Value
Memory	58%

Segmented Gauge

Risk score

Risk score, data table
name	Value
Risk score	70%

Plan usage

Half gauge with ticks and a needle: the metric tabs change the value, the needle re-aims with a spring and the number counts.

Plan usage

API requests used, data table
name	Value
API requests used	74%

Resets in 23 daysForecast 96%

State – Loading

CPU load

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Credit Score

Score on a banded speedometer with the score factors.

Credit score

Credit score, data table
name	Value
Credit score	742

Score factors

Payment historyNo late payments
Excellent
Credit use18% of your limit
Good
Account age7 years on average
Good
Hard inquiries1 in the last 2 years
Fair

Server Load

Four gauge panels, one per server.

api-1

api-1 CPU, data table
name	Value
api-1 CPU	64%

api-2

api-2 CPU, data table
name	Value
api-2 CPU	41%

db-1

db-1 CPU, data table
name	Value
db-1 CPU	82%

cache-1

cache-1 CPU, data table
name	Value
cache-1 CPU	23%

Net Promoter Score

NPS ring with the response mix.

Net Promoter Score

NPS, data table
name	Value
NPS	48

Response mix

Response mix, data table
name	Value
Promoters	61%
Passives	26%
Detractors	13%

API Reference

Prop	Type	Default
variant	"semi-circle-gauge" \| "speedometer-gauge" \| "ring-gauge" \| "segmented-gauge"	"semi-circle-gauge"
value · min · max	number	— · 0 · 100
label · caption	string	—
bands	{ from, to, color }[]	—
color · segments · valueFormatter	ChartColor · number · (v) => string	—
state · animate	"ready" \| "loading" \| … · boolean	—
value*	number	—
animate	boolean	—
animationKey	string \| number	—
caption	string	—
className	string	—
color	"indigo" \| "blue" \| "purple" \| "green" \| "orange" \| "pink" \| "yellow" \| "red" \| "grey"	—
height	number	220
label	string	"Value"
max	number	100
maxLabel	string	—
min	number	0
minLabel	string	—
needle	boolean	false
onRetry	() => void	—
segments	number	10
state	"ready" \| "loading" \| "empty" \| "error"	—
ticks	number	—
valueFormatter	ChartValueFormatter	—
width	number	—

Theming

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.

Variable	Used for	Default
Color
	Stroke	#F1F5F7dark #323438
	Fill	#000000dark #FFFFFF
	Stroke	#F1F5F7dark #323438
	Fill	#6E6E70dark #A2A3A3

PreviousFunnel Chart NextHeatmap