Getting started

Install TradeCanvas and render a chart in under a minute.

Installation

Use whichever package manager you prefer:

npm install @tradecanvas/chart
# or
pnpm add @tradecanvas/chart
# or
yarn add @tradecanvas/chart

Drop-in widget

ChartWidget is the fastest path to a working chart. It renders a full TradingView-like UI inside any host element — toolbar, drawing sidebar, settings dialog, status bar — with zero framework dependency.

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,
  // Optional features
  watchlist: true,         // right-side sparkline panel
  persistLayouts: true,    // remember per-symbol indicators / drawings
  // dragDropImport defaults to true — drop a CSV / JSON onto the chart
})

Out of the box, the widget supports a full set of TradingView-style gestures: drag the price/time axes to scale, Shift+drag to measure, Alt+click to pin a tooltip, Ctrl/⌘+K for the command palette, Ctrl/⌘+P for symbol search, and ? to see the full shortcut sheet.

Headless Chart

For full control over the surrounding UI, use the lower-level Chart class directly. You bring your own toolbar; you keep all features:

import { Chart } from '@tradecanvas/chart'

const chart = new Chart(host, {
  chartType: 'candlestick',
  theme: 'dark',
})

chart.setData(bars)
chart.addIndicator('sma', { period: 20 })

Framework wrappers

React, Vue, and Svelte wrappers are available in the frameworks section.

Next steps