Area Chart
A gradient-filled area chart for visualizing trends over time.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { AreaChart } from "@wunderui/react"Examples
Variants
One series, two series, stacked, without grid and axes, and as a sparkline.
| single |
|---|
| two series |
|---|
| stacked |
|---|
| showGrid={false} showAxis={false} |
|---|
| sparkline |
|---|
Figma variants
All 25 Area 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.
Area Charts
Area Charts
Area Charts
Total Profits
Area Charts
Earnings
Area Charts
Total Profits
Area Charts
Area Charts
Area Charts
Income
Area Charts
Total Profits
Area Charts
Total Profits
Area Charts
Area Charts
Area Charts
Income
Area Charts
Total Profits
Area Charts
Total Profits
Area Charts
Area Charts
Area Charts
Area Charts
Area Charts
Area Charts
Area Charts
Area Charts
Area Charts
Area Charts
Trading & finance
Figma trading tiles (sample data): a big value header with TrendChip, Segment xs ranges, badge legends and actions. Each chart appears as it scrolls into view — the box fades and rises in, lines draw left to right, fills fade in after them, candles grow from their baseline.
Portfolio value
$127,193.85USD
Total market cap
Bitcoin
BTC
- 24h high
- $68,828.16
- 24h low
- $65,659.77
- Volume
- 28.41B
Fear & greed history
Daily score, sample data
Cumulative return
Portfolio vs. benchmark, sample data
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%