Data & ChartsPro

Radial Gauge

A half radial chart: a ring open at the bottom, split into the shares of a whole, with the legend underneath.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { RadialGauge } from "@wunderui/react"

The Figma card: three shares on the half ring, the legend underneath.

three shares of 100, legend below
Audience46% Earnings24% Visitors7%

six shares, the whole ring
Audience43% Earnings22% Sales14% Marketing7% Visitors7% Others7%

One share against its goal on a muted track, the value in the open centre — no legend.

track + centerLabel
Completion72%

thin ring, rounded
Storage58%

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

The gauge in a chart card next to a donut — the same shares, two readings.

Sessions by source, this month

Of the 2 TB plan

Used1.32 TB

Area, bar, line, combined, pie, radar and radial charts and the radial gauge inside the same card.

Last 6 months

Grouped by month

Curved line

Bars and line

Share of sessions

Two teams compared

Radial share

Share of sessions