React Candlestick Chart

Build professional financial charts with a React candlestick component. OHLC data support, volume overlay, moving averages, and real-time streaming. Style every candle with Tailwind CSS.

$npm install @chartts/react

example.tsx

import { CandlestickChart } from "@chartts/react"

export function StockChart() {
  return (
    <CandlestickChart
      data={stockData}
      x="date"
      open="open"
      high="high"
      low="low"
      close="close"
      className="h-96"
      upClassName="fill-emerald-500 stroke-emerald-600"
      downClassName="fill-red-500 stroke-red-600"
    />
  )
}

Features

OHLC (Open, High, Low, Close) data format

Volume bars overlay

Moving average lines (SMA, EMA)

Customizable up/down candle colors

Zoom and pan for time navigation

Real-time data streaming

Under 4kb tree-shaken

Read the Docs See Demos Examples