Financial Chart Library

Chart.ts is a professional-grade financial charting library. Candlestick and OHLC charts, volume bars with direction coloring, kagi and renko reversal charts, and a full suite of technical indicators via @chartts/finance. Built for trading platforms, portfolio trackers, and financial dashboards.

$npm install @chartts/react @chartts/finance
example.tsx
import { CandlestickChart } from "@chartts/react"
import { sma, ema, rsi, macd, bollingerBands } from "@chartts/finance"

const indicators = {
  sma20: sma(priceData, { period: 20, field: "close" }),
  ema50: ema(priceData, { period: 50, field: "close" }),
  bands: bollingerBands(priceData, { period: 20, stdDev: 2 }),
  rsiValues: rsi(priceData, { period: 14 }),
  macdLine: macd(priceData, { fast: 12, slow: 26, signal: 9 }),
}

<CandlestickChart
  data={priceData}
  x="date"
  open="open" high="high" low="low" close="close"
  volume="volume"
  overlays={[
    { data: indicators.sma20, className: "stroke-amber-400", label: "SMA 20" },
    { data: indicators.ema50, className: "stroke-blue-400", label: "EMA 50" },
    { data: indicators.bands.upper, className: "stroke-zinc-500/50" },
    { data: indicators.bands.lower, className: "stroke-zinc-500/50" },
  ]}
  className="h-96"
  upClassName="fill-emerald-500"
  downClassName="fill-red-500"
  crosshair
  zoomPan
/>

Features

Candlestick and OHLC price charts with volume
Technical indicators: SMA, EMA, RSI, MACD, Bollinger Bands, Stochastic
Kagi and renko reversal charts for trend analysis
Volume bars with buy/sell direction coloring
Crosshair with value labels for precise reading
Zoom and pan for exploring price history
Real-time WebSocket streaming for live market data
Read the DocsSee DemosExamples