Line Chart
Plots one or more series as smooth or linear lines.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { LineChart, LineChartReferenceLine } from "@wunderui/react"Examples
Variants
Straight, curved, with dots, two series, and without grid and axes.
| straight |
|---|
| curved |
|---|
| showDots |
|---|
| showGrid={false} showAxis={false} |
|---|
Figma variants
All 27 Line 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.
Line Charts
Line Charts
Line Charts
Total Profits
Line Charts
Earnings
Line Charts
Total Profits
Line Charts
Line Charts
Line Charts
A
Line Charts
Earnings
Line Charts
Total Profits
Line Charts
Line Charts
Line Charts
Earnings
Line Charts
Earnings
Line Charts
Total Profits
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line Charts
Line 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
Market dominance
Share of total market cap
Seasonal market overview
Total market cap vs. last year, sample data
Total market volume
RSI (14)
Relative strength index · 58.2
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%