Radar Chart
Compares multiple series across shared axes on a polar grid.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { RadarChart } from "@wunderui/react"Examples
Variants
One and two series.
| single |
|---|
| two series |
|---|
Figma variants
All 15 Radar 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.
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
Radar Charts
Total Profits
- Audience46%
- Earnings24%
- Sales15%
- Marketing8%
- Visitors7%
- Others7%
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%
Vendor comparison
Two vendors scored on five criteria; turn a vendor off to see the other’s shape alone.