CandlestickChart
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
An OHLC (Open, High, Low, Close) candlestick chart for financial data. Uses filled vs hollow bodies to distinguish up/down candles on monochrome displays.
The candles stretch to fill whatever box the chart is given, including a widget's stored preview, while wicks, outlines, patterns and labels keep their size. The date axis reaches past the first and last candles by enough for their bodies, so every body fits inside the chart, even with only two candles.
Import
import { CandlestickChart } from "~lib/charts/candlestick-chart";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | CandlestickPoint[] | Yes | N/A | OHLC data points (min 2). See format below |
axis | { y?: { name?, visible?, min?, max?, grid? }; x?: { ... } } | No | N/A | Axis configuration |
width | number | string | No | 300 | Chart width |
height | number | string | No | 300 | Chart height |
upPattern | "solid" | "diagonal" | "dots" | "crosshatch" | No | none (hollow) | Fill pattern for up candles (close >= open) |
downPattern | "solid" | "diagonal" | "dots" | "crosshatch" | No | "solid" | Fill pattern for down candles (close < open) |
CandlestickPoint Format
Each data point requires all five fields:
| Field | Type | Description |
|---|---|---|
date | Date | number | Timestamp (Date object or ms) |
open | number | Opening price |
high | number | Highest price in the period |
low | number | Lowest price in the period |
close | number | Closing price |
Visual Encoding
- Wick (thin vertical line): spans from
hightolow - Body (rectangle): spans from
opentoclose - Up candle (close >= open): hollow body (stroke only) by default
- Down candle (close < open): solid-filled body by default
- Doji (open === close): rendered as a thin horizontal line
- Value axis: spans from the lowest low (or
axis.y.min) to the highest high;axis.y.maxadds headroom above the highest high but never cuts a wick short - Date axis: ticks fall on whole days, Mondays or months of the clock in
axis.x.timeZone(or the zoneaxis.x.dateFormatnames), and are written in it, so daily candles of a market in another zone line up with their ticks