• BTC —
  • ETH —
  • SOL —
  • BNB —
  • XRP —
  • DOGE —
  • ADA —
  • AVAX —
  • LINK —
  • DOT —
  • LTC —
  • TRX —
v1.31.0 WebGL renderer, 30 languages

The chart engine for trading apps.

Candlesticks to Renko, 134 indicators, 69 drawing tools, live exchange feeds and orders on the chart. Drawn with Canvas 2D or WebGL, with zero dependencies. Drop in the full ChartWidget or build your own UI on the headless Chart.

Get started Browse examples

Vanilla TSReactVueSvelte

CONNECTING · BINANCE · BTCUSDT · 5m Drag panClick + scroll zoomDrag axis scale
111
indicators
69
drawing tools
18
chart types
30
widget languages
1M
bars at 60 fps with WebGL
0
third-party runtime dependencies
From first look to filled order

One chart for the whole trade

Four live charts, each at work on its part of it. Drag them, zoom them, draw on them.

  1. Read the market

    Bands, averages and oscillators over the bars, Fibonacci levels and trend lines on top, each with its own settings and alerts.

    • 134 indicators, any one on another, such as an average of the RSI
    • 69 drawing tools with magnet, groups and undo
    • Alerts on prices, lines and indicator crossings

  2. Trade on the chart

    Orders, positions and their brackets live on the price scale. Drag a stop to move it; the paper broker fills them, so you can build before you connect.

    • Drag to place an order, drag its stop-loss and take-profit to move them
    • Fill marks and profit and loss on the chart
    • Your broker plugs in through one adapter

  3. Replay the past

    Step through history bar by bar or let it run: indicators, drawings and paper orders all follow the replayed price.

    • Any start bar, any speed
    • Each bar can form from finer ones, step by step
    • Trade the replay with the paper broker
    Replaying

  4. Scale without stutter

    200,000 bars here with four indicators, panning on their own. Switch the renderer and watch the frame time: with WebGL the GPU draws the bars and the lines.

    • 1,000,000 bars zoomed out at 60 fps with WebGL
    • Canvas 2D where WebGL isn’t available, with the same look
    • Only the bars on screen are drawn
    —
Open source
  • MIT licensed
  • 0 runtime dependencies
  • .d.ts types for every API
  • v1.31.0
Star on GitHub
Feature lab

Every feature, on a live chart.

Pick a scene. Each one boots the full ChartWidget into a state that shows one area at work — then it is yours to drag, draw and switch.

Fibonacci and Gann tools with your own levels, Elliott waves, harmonic patterns, notes and brushes. Double-click a drawing for its settings, right-click for its menu; alerts follow trend lines, and Long/Short works out the position size.

Scroll into view to start the live chart
Switch a symbol or timeframe to time it

Try this

  • Double-click the Fibonacci retracement and edit its levels
  • Right-click a drawing: bring it forward, group it, or add an alert
  • Pick the brush or the path tool; Enter ends a path
chart.addDrawing({
  type: 'riskReward',               // Long/Short Position
  anchors: [entry, stop],           // { time, price } each
  options: { accountSize: 10_000, risk: 1, rewardRatio: 2 },
})
chart.addDrawingAlert(trendLine, { condition: 'crossing' })
chart.groupDrawings([fib, note], 'Swing')
Chart types

Every chart type, live in the page

Each tile is a real Chart instance, not an image. Drag to pan, scroll to zoom and hover for the crosshair; every tile responds on its own.

Candlestick OHLC
Heikin-Ashi Trend
Area Close
Baseline Above / below
OHLC Bars Classic
Step Line Discrete
Under the hood

Measured, documented, yours to extend

The engine behind the Feature Lab. Every number below is reproducible with pnpm bench.

Frame budget

0.001ms
live tick with 4 indicators on 100k bars
27ms
full recalculation after a symbol switch, 100k bars
0.32ms
LTTB downsample, 100k → 1,600 points
<0.3ms
hover frame, flat from 500 to 100k bars

Two stacked canvases: a hover repaints only the thin top one. Every renderer walks only the bars on screen.

Gestures

Drag
pan, also past the last bar
Scroll
zoom around the pointer
Pinch
zoom on a touch screen
Drag right
older bars load as you go
Drag an axis
scale it
Ctrl + drag
select drawings
Shift + drag
measure
Alt + click
pin a tooltip
WidgetOne call, full trading UI
ChartWidget brings the toolbar, drawing sidebar, watchlist, alerts, object tree, data window, replay and a command palette (Ctrl+K), in 30 languages from English and Vietnamese to Chinese, Japanese, Korean and Arabic.
DataAny market feed
Binance, Coinbase, Bybit and Kraken adapters built in; WebSocketAdapter and PollingAdapter for everything else. Older bars load as you scroll back; reconnects on its own and drops superseded symbol switches.
TradingOrders on the chart
ExecutionAdapter with a paper broker, drag-to-create orders, brackets, draggable stop-loss and take-profit lines, alerts to webhooks and desktop notifications.
FrameworksReact, Vue and Svelte
@tradecanvas/react, /vue and /svelte wrap the same engine with reactive, typed props. The full Chart instance stays one ref away.
PluginsExtend every layer
Register custom indicators with incremental update(), drawing tools, chart types and overlays, globally or per chart.
AnalyticsBacktests next to the chart
A bar-by-bar Backtester with Monte Carlo bands.
Finance charts

Beyond candlesticks

Sparklines, equity curves, order-book depth, sector maps, waterfalls, gauges, bars, donuts, scatter plots, histograms, calendars and correlation matrices for portfolios and KPIs.

BTC $65,234
+2.4%
ETH $3,412
-1.2%
SOL $148.00
+5.1%
BNB $582.00
+0.8%
ADA $0.4500
-3.2%
DOT $7.23
+1.6%
Portfolio performance
Order book depth
Crypto market heatmap
P&L attribution
Fear & Greed index
Foreign net buying, billion dong
Portfolio allocation
Banks: risk and return
Daily returns
Daily change by session
Market map by sector
Bank stocks: correlation of daily returns
Counter-clock: price against volume, 25-day averages
Quick start

Same chart, five ways in

The full widget, a framework component or the headless engine. They share one renderer.

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  adapter: new BinanceAdapter(),
  locale: 'en',            // 30 languages: 'vi', 'ja', 'zh'…
  trading: true,
})

Put a live chart in your app today.

Read the docs Star on GitHub