Canvas-powered React charts

React Candlesticks—charts built for serious trading UIs

Build responsive trading charts in React with candlesticks, indicators, crosshairs, zoom, and theming—rendered on Canvas for smooth performance on large datasets.

react-candlesticks
Screenshot of a React candlestick chart with indicators and crosshairs
Live Demo Quick Start 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 True Range (ATR)Volatility
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
Open Source · MIT

Start building
trading charts
for your app.

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

Live Demo Read the Docs
Canvas rendering React 19 TypeScript Tree-shakeable SSR-safe