Candlestick Chart React component
A trading-style candlestick chart: OHLC candles with a volume panel, a moving average, 1M / 3M / 6M range tabs, a last-price marker, and a crosshair with price and date pills plus a live OHLC readout.
About the Candlestick Chart component
Candlestick Chart is a trading-style price chart: each candle shows a period's open, high, low and close, coloured by whether it closed up or down, with traded volume in a panel underneath and a moving average to show the trend.
Switch between 1M, 3M and 6M, read any candle through the crosshair (with the price under your pointer on the axis), and see the latest price tagged on the axis.
When to use it
Use it for stock, crypto and FX dashboards, portfolio and brokerage apps, commodity or pricing analytics, anything where open, high, low and close all matter.
For a single price over time a line or area chart is simpler; candlesticks earn their place when traders need the full range of each period.
Installation
Add the Candlestick Chart component to your project with the shadcn CLI. It lands in components/candlestick-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/candlestick-chartOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<CandlestickChart /> accepts 12 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| symbol Ticker or instrument name. | string | "NRTH" |
| name | string | "Northwind Labs" |
| candles | { label: string; open: number; high: number; low: number; close: number; volume?: number }[] | DEFAULT_CANDLES |
| ranges | { label: string; count: number }[] | DEFAULT_RANGES |
| defaultRange Index into `ranges` to start on. | number | 1 |
| movingAverage Period of the moving average line; 0 hides it. | number | 20 |
| showVolume | boolean | true |
| upColor | string | — |
| downColor | string | — |
| height Height of the price panel, in px. | number | 260 |
| formatPrice | (value: number) => string | (v) => `$${v.toFixed(2)}` |
- theme"dark" | "light"Default: "dark"
- symbol
Ticker or instrument name.
stringDefault: "NRTH" - namestringDefault: "Northwind Labs"
- candles{ label: string; open: number; high: number; low: number; close: number; volume?: number }[]Default: DEFAULT_CANDLES
- ranges{ label: string; count: number }[]Default: DEFAULT_RANGES
- defaultRange
Index into `ranges` to start on.
numberDefault: 1 - movingAverage
Period of the moving average line; 0 hides it.
numberDefault: 20 - showVolumebooleanDefault: true
- upColorstring
- downColorstring
- height
Height of the price panel, in px.
numberDefault: 260 - formatPrice(value: number) => stringDefault: (v) => `$${v.toFixed(2)}`
npm dependencies
Installed for you by the shadcn CLI.
Candlestick Chart FAQ
- What data does it need?
- candles is { label, open, high, low, close, volume? }[], oldest first. label is the short date shown on the axis and in the tooltip; volume is optional and feeds the lower panel.
- How do the range tabs work?
- ranges is { label, count }[]: each tab shows the latest count candles. defaultRange picks the starting tab. The moving average still uses earlier candles, so it starts at the left edge.
- Can I change the colours?
- upColor and downColor override the green and red; the moving average uses the theme's amber. movingAverage={0} hides it and showVolume={false} hides the volume panel.
- Is it accessible?
- The chart is focusable with a summary of the range (start, end, change, high, low); arrow keys, Home and End step through candles and update the readout, Escape clears. With reduced motion candles appear without growing.
