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
Single series
One series as a filled area.
Two series
Two overlapping areas, each in its own chart colour.
Stacked
The second series sits on top of the first (stacked).
Without grid and axes
Only the shape: showGrid={false} and showAxis={false}.
Sparkline
A 64 px strip without grid or axes (sparkline).
Type 01
All 25 Area 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
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.
Type 27
Type 30
Type 28
Type 29
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.