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
Straight
Straight segments between the points.
Curved
A smooth curve through the points (curved).
With dots
Two series with a dot on every point (showDots).
Without grid and axes
Only the curve: showGrid={false} and showAxis={false}.
Type 01
All 27 Line 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
Type 27
Type 28
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 29
Type 30
Type 31
Type 32
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.