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,
})

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