Pie Chart
Shows proportions of a whole, with an optional donut mode.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { PieChart } from "@wunderui/react"Examples
Pie
A full pie, one slice per share.
Donut
The same shares as a ring (donut).
Donut with labels
Each slice labelled with its value (showLabel).
Type 01
All 69 Pie Chart cards of the Figma library, one per box, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Replay brings the loading state back.
Type 02
Type 03
Type 04
Type 05
Type 06
Type 07
Type 08
Type 09
Type 10
Type 11
Type 12
Type 13
Type 14
Type 15
Type 16
Type 17
Type 18
Type 19
Type 20
Type 21
Type 22
Type 23
Type 24
Type 25
Type 26
Type 27
Type 28
Type 29
Type 30
Type 31
Type 32
Type 33
Type 34
Type 35
Type 36
Type 37
Type 38
Type 39
Type 40
Type 41
Type 42
Type 43
Type 44
Type 45
Type 46
Type 47
Type 48
Type 49
Type 50
Type 51
Type 52
Type 53
Type 54
Type 55
Type 56
Type 57
Type 58
Type 59
Type 60
Type 61
Type 62
Type 63
Type 64
Type 65
Type 66
Type 67
Type 68
Type 69
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.