Framework wrappers

Idiomatic wrappers for React, Vue, and Svelte. All three expose the same prop surface and hand you the underlying Chart instance.

Install

npm install @tradecanvas/react   # or @tradecanvas/vue · @tradecanvas/svelte
npm install @tradecanvas/chart   # the core (peer of each wrapper)

React

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

function App() {
  const chartRef = useRef<TradeCanvasRef>(null)

  return (
    <TradeCanvas
      ref={chartRef}
      symbol="BTCUSDT"
      timeframe="5m"
      theme="dark"
      adapter={new BinanceAdapter()}
      onReady={(chart) => {
        chart.on('orderPlace', e => console.log(e.payload))
      }}
    />
  )
}

Vue

<script setup lang="ts">
import { TradeCanvas } from '@tradecanvas/vue'
import { BinanceAdapter } from '@tradecanvas/chart'

const adapter = new BinanceAdapter()
</script>

<template>
  <TradeCanvas
    symbol="BTCUSDT"
    timeframe="5m"
    theme="dark"
    :adapter="adapter"
    @ready="(chart) => console.log('ready', chart)"
  />
</template>

Svelte

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import { BinanceAdapter } from '@tradecanvas/chart'

  const adapter = new BinanceAdapter()
</script>

<TradeCanvas
  symbol="BTCUSDT"
  timeframe="5m"
  theme="dark"
  {adapter}
  onReady={(chart) => console.log('ready', chart)}
/>

Shared props

Bars of your own, indicators with their inputs, and a chart that never opens a stream of its own:

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import type { Chart } from '@tradecanvas/chart'

  let { bars } = $props()
  let chart = $state<Chart | null>(null)
</script>

<TradeCanvas
  data={bars}
  stream={false}
  indicators={['rsi', { id: 'ema', params: { period: 50 } }]}
  features={{ replay: true }}
  bind:chart
/>

Prop	Type	Notes
`symbol`	`string`	The stream's symbol. Default `'BTCUSDT'`.
`timeframe`	`TimeFrame`	The stream's interval. Default `'5m'`.
`theme`	`'dark' \| 'light' \| Theme`	Default `'dark'`.
`chartType`	`ChartType`	Default `'candlestick'`.
`data`	`OHLCBar[]`	Bars of your own, shown as they are. Given at mount, no stream is opened; given later, a stream already open stays (`stream=false` closes it).
`adapter`	`DataAdapter`	The stream's source; Binance without one.
`stream`	`boolean`	`false`: no stream at all, the chart waits for `data`. Default `true`.
`historyLimit`	`number`	Bars the stream loads first. Default 500.
`indicators`	`IndicatorSpec[]`	`'rsi'`, or `{ id, params, position }`; one whose inputs change is put back with them.
`features`	`FeaturesConfig`	What users can do on the chart; changes after mount apply too.
`signalMarkers / tradeZones`	`arrays`	Buy and sell marks and trades; a replay shows them as it reaches them.
`signalMarkerStyle / tradeZoneStyle`	`styles`	Their colours and labels.
`overrides`	`ChartStyleOverrides`	The chart's look by key (see Styling).
`autoScale`	`boolean`	Default `true`.
`watermarkText`	`string`	Text behind the bars.
`options`	`Partial<ChartOptions>`	Chart options the props don't cover (`maxBarSpacing`, `rightMargin`, `renderer`…), merged over the component's defaults at mount. Later changes are not applied; `chartType`, `theme` and `autoScale` always come from their props.
`onReady`	`(chart) => void`	After the chart mounts (Vue: the `ready` event).

Need something beyond the props? Reach the underlying Chart via onReady, a ref (React / Vue), or bind:chart (Svelte) for the full API — drawings, trading, execution adapters, plugins, resizable panes, and more.