npm install react-candlesticks

React Candlesticks—charts built for serious trading UIs

React Candlesticks is a React candlestick chart library for building responsive trading charts with volume, indicators, crosshairs, zoom, and theming on Canvas.

Screenshot of a React candlestick chart with indicators and crosshairs
Live Demo Docs React Candlesticks GitHub
Quick Start

One package.
Start charting.

Install one package and render candlesticks, volume bars, indicators, and crosshairs with a composable React API.

npm install react-candlesticks 
import {
  Chart, Panel, Candlesticks,
  VolumeBars, SMA, exampleData
} from 'react-candlesticks';

export default function App() {
  return (
    <Chart
      granularity="d1"
      data={exampleData}
      theme="dark"
    >
      <Panel heightRatio={3}>
        <Candlesticks />
        <SMA period={50} />
      </Panel>
      <Panel>
        <VolumeBars />
      </Panel>
    </Chart>
  );
}
Why React Candlesticks?

A charting engine for modern trading UIs.

Built for real trading interfaces — handles multi-panel layouts, zooming, panning, and crosshair interactions with predictable performance.

Canvas Rendering

Renders to canvas for smooth zoom, pan, and hover. Viewport-based indicators keep performance steady as datasets grow.

Canvas · Large datasets
Composable JSX API

Compose charts using JSX with nested Panel and layer components, or use the flat panels prop API. Fully typed and flexible.

JSX · React · TypeScript
Technical Indicators

Includes essential indicators like SMA, EMA, RSI, and MACD, with configurable settings for each study. More indicators are in development.

Built-in · Configurable
Crosshairs and Legends

Each layer includes its own configurable legend with live outputs on hover, alongside configurable time and value crosshairs.

Legends · Crosshairs
Zoom & Scroll

Wheel and touchpad zoom, pinch-to-zoom, and smooth scrolling. Supports controlled mode via onZoom and onScroll.

Touch-ready · Controlled
Fully Configurable

Customize everything — from chart styling and layout to indicator behaviour. Start with built-in light and dark themes, or define your own.

Styling · Behaviour · Layout
Built-in Indicators
Volume BarsVolume Simple Moving Average (SMA)Trend Exponential Moving Average (EMA)Trend Bollinger BandsTrend RSI (Relative Strength Index)Oscillator MACDOscillator StochasticOscillator Average Directional Index (ADX)Trend Average True Range (ATR)Volatility Commodity Channel Index (CCI)Oscillator On-Balance Volume (OBV)Volume Parabolic SARTrend Williams %ROscillator
More indicators in development
Composable

One JSX tag
per indicator.

Add indicators as JSX elements inside panels. Adjust parameters such as period lengths, colors, and display options through props.

<Stochastic/> Stochastic(14,3,3)
Stochastic indicator panel
Theming

Light, dark,
or fully custom.

Pass theme="light" or theme="dark" — or pass a full Theme config object to override any detail.

theme="dark"
Chart with dark theme
theme="light" — default
Chart with light theme
From the blog

Latest articles.

View all articles →
Open Source · MIT

Start building
trading charts
for your app.

Works with any React project. No backend. Bring your own data.

React Candlesticks chart example React Candlesticks docs
Canvas rendering React 19 TypeScript Tree-shakeable SSR-safe