Radial Gauge
A half radial chart: a ring open at the bottom, split into the shares of a whole, with the legend underneath.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { RadialGauge } from "@wunderui/react"Examples
Three shares
The Figma card: three shares of 100 on the half ring, the legend underneath.
Six shares
Six shares that fill the whole ring.
Track with centre label
One share against its goal on a muted track, the value in the open centre — no legend.
Thin rounded ring
A thinner ring with rounded ends (thickness, cornerRadius).
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Audience share
Sessions by source this month, as half-ring shares with the legend underneath.
Storage
One value on a rounded track, the amount in the middle.
Revenue
An area chart under the headline number and its trend.
Revenue vs cost
Grouped bars with legend chips; hovering a month dims the others.
Trend
A curved line that draws itself in, with the value it ends on.
Mixed
Bars for cost and a line for revenue in one card.
Traffic sources
A donut with its legend; hovering a slice or a legend row puts its share in the middle.
Team profile
Two teams on one radar, with legend chips.
Completion
Radial shares of one goal.
Audience
The radial gauge in the same card.