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
Variants
A pie, a donut, and with labels.
| pie |
|---|
| donut |
|---|
| showLabel |
|---|
Figma variants
All 69 Pie Chart cards of the Figma library, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Hover a card to replay.
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
Pie Charts
Total Profits
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Chart card
Area, bar, line, combined, pie, radar and radial charts and the radial gauge inside the same card.
Revenue
Last 6 months
Revenue vs cost
Grouped by month
Trend
Curved line
Mixed
Bars and line
Traffic sources
Share of sessions
Team profile
Two teams compared
Completion
Radial share
Audience
Share of sessions
- Audience46%
- Earnings24%
- Visitors7%