Candlestick Chart
An OHLC (open/high/low/close) chart for visualizing price movement over time.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { CandlestickChart } from "@wunderui/react"Examples
Variants
Daily candles — rising green, falling red — with moving averages and month bands, in a card, and bare without grid and axes.
| moving averages, month bands, price axis right |
|---|
Price ($)20 Day SMA50 Day SMA |
| last 30 days |
|---|
| showGrid={false} showAxis={false} |
|---|
| custom colours (upColor / downColor) |
|---|
Figma variants
All 6 Candlestick 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.
Candlestick Charts
Candlestick Charts
Candlestick Charts
Total Profits
Candlestick Charts
Total Profits
Candlestick Charts
Candlestick 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 performance
$127,193.85USD
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Price this week
Open, high, low and close per day in a dashboard widget.
WUI · price
This week