@tradecanvas/react

React component for @tradecanvas/chart — reactive props, ref forwarding, zero boilerplate.

Install

npm install @tradecanvas/react @tradecanvas/chart

react (>= 18) and react-dom are peer dependencies.

Usage

import { TradeCanvas } from '@tradecanvas/react'

export function Chart() {
  return (
    <div style={{ height: 500 }}>
      <TradeCanvas symbol="BTCUSDT" timeframe="5m" theme="dark" indicators={['rsi', 'macd']} />
    </div>
  )
}

Streams live Binance data by default. Pass data={bars} for static OHLC, or adapter={...} for any feed (CoinbaseAdapter, BybitAdapter, KrakenAdapter, or your own).

Props

symbol, timeframe, theme ('dark' | 'light' | Theme), chartType, indicators (ids, or { id, params, position }), data (bars of your own; no stream; a new array that goes on from the last, [...bars, next], goes in as live ticks), adapter, stream (false: no stream of its own), historyLimit, features (changes apply after mount too), autoScale, signalMarkers, signalMarkerStyle, tradeZones, tradeZoneStyle, overrides (style overrides by key, all of your app's), watermarkText, onReady(chart), onCrosshairMove, className, style.

Imperative access

import { useRef } from 'react'
import { TradeCanvas, type TradeCanvasRef } from '@tradecanvas/react'

const ref = useRef<TradeCanvasRef>(null)
ref.current?.getChart()             // the underlying Chart — full API
ref.current?.screenshot('chart.png')

Reach the underlying Chart (drawings, trading, execution adapters, plugins, drag-to-create orders, resizable panes) via onReady or ref.getChart(). See the main docs.

License

MIT