Data & Charts
Radial Chart
A circular progress-style chart for a single goal value.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { RadialChart } from "@wunderui/react"Examples
Thin rings
A large opening in the middle leaves thin rings (innerRadius="60%").
Thick rings
A small opening leaves thick rings (innerRadius="20%").
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
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.