The trading chart that ships with its UI.

v0.14 · 66 indicators

The trading chart that ships with its UI.

A high-performance, zero-dependency canvas charting engine with a built-in TradingView-grade interface. Indicators, drawing tools, real-time streaming, replay, and a backtester — in one `ChartWidget` call.

npmpnpmyarn

npm install @tradecanvas/chart COPY

Get started GitHub

66 Indicators

24 Drawing tools

17 Chart types

0 Dependencies

BTCETHSOLBNB

1m5m15m1h4h1d

CandlesHeikin-AshiAreaBarsBaseline

Connecting to Binance…

Drag to pan Scroll to zoom Drag axes to scale Hover for crosshair

Interactive · no screenshots

Every chart type, live in the page

Each tile is a real `Chart` instance, not an image. Drag to pan, scroll to zoom, hover for the crosshair — every one responds independently.

Built for trading

Everything you need for a professional trading chart, in a single package.

/\\

66 technical indicators

SMA, EMA, RSI, MACD, Bollinger, Ichimoku, Stochastic RSI, Supertrend, Anchored VWAP, plus a deep oscillator bench (PPO, RMI, Disparity, Qstick, PGO, and more) — all computed internally with zero external math libraries.

//

24 drawing tools

Trendlines, Fibonacci (incl. Time Zones), channels, Elliott waves, Gann tools. Click-to-place with magnet snapping, undo/redo, and full serialization.

\[/\]

17 chart types

Candlestick, OHLC bars, line, area, baseline, hollow candles, Heikin-Ashi, Renko, Kagi, Line Break, Point & Figure, Range Bars, Volume Candles, Equivolume, HLC Area, Step Line, and Line+Markers.

▦

ChartWidget (built-in UI)

One-line embed — `new ChartWidget(host, {...})` ships a full TradingView-like UI: toolbar, drawing sidebar, settings dialog, status bar. Framework-agnostic.

$

Trading overlay

Render positions, orders, SL/TP markers directly on the chart. Drag to modify. Partial-close strips, multi-stop P&L gradient, custom label templates.

\~

Real-time streaming

Built-in Binance WebSocket adapter with typed REST + WS validators. Or plug in your own data source with the simple `DataAdapter` interface. Auto-reconnect included.

⚙

Web Worker pipeline

Indicator math runs off the render loop via `IndicatorWorkerHost` — Promise-based `calculate()`, sync fallback for SSR/tests, per-request timeout. No frozen frames.

⊕

Backtester + Monte Carlo

Bar-by-bar `Backtester` with virtual fills, slippage / commission models, plus a 4-strategy reference library. `runMonteCarlo()` exposes path-dependence with P5/P95 equity bands and probability-of-profit.

⤴

TradingView gestures

Drag the price/time axes to scale, double-click to reset, Shift+drag for a measure ruler, Alt+click to pin a tooltip, hover for axis pill labels that follow the cursor. The set of moves a serious trader expects.

Finance Charts

Beyond candlesticks — visualize portfolios, order books, market sectors, and KPI metrics.

Portfolio Performance

Order Book Depth

Crypto Market Heatmap

P&L Attribution

Fear & Greed Index

Quick start

A full-featured trading chart with live data in one call. Drop-in `ChartWidget` — no framework needed.

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'
const widget = new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(),
  historyLimit: 500,
  trading: true,
  onReady: (chart) => {
    chart.on('orderPlace', (e) => console.log('order intent', e.payload))
  },
})

Read the docs See examples