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
Moving averages and month bands
Daily candles — rising green, falling red — with two moving averages, month bands and the price axis on the right.
Last 30 days
The last 30 daily candles.
Without grid and axes
Only the candles: showGrid={false} and showAxis={false}.
Custom colours
Rising and falling candles in chart colours (upColor, downColor).
Type 01
All 6 Candlestick 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
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.
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.