@tradecanvas/vue

@tradecanvas/vue

Vue 3 component for @tradecanvas/chart — reactive props, template ref, zero boilerplate.

Install

npm install @tradecanvas/vue @tradecanvas/chart

vue (>= 3.3) is a peer dependency.

Usage

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

function onReady(chart: Chart) {
  // full charting API
}
</script>

<template>
  <div style="height: 500px">
    <TradeCanvas
      symbol="BTCUSDT"
      timeframe="5m"
      theme="dark"
      :indicators="['rsi', 'macd']"
      @ready="onReady"
    />
  </div>
</template>

Streams live Binance data by default. Pass :data="bars" for static OHLC, or :adapter="..." for any feed.

Props & events

Props: symbol, timeframe, theme, chartType, indicators (ids, or { id, params, position }), data (bars of your own; no stream), adapter, stream (false: no stream of its own), historyLimit, features (changes apply after mount too), autoScale, signalMarkers, signalMarkerStyle, tradeZones, tradeZoneStyle, overrides (style overrides by key, all of your app's), watermarkText.

Events: @ready="(chart) => …", @crosshairMove="(payload) => …".

Imperative access

<script setup lang="ts">
import { ref } from 'vue'
const el = ref()
// el.value.getChart() · el.value.screenshot('chart.png')
</script>

<template>
  <TradeCanvas ref="el" symbol="BTCUSDT" />
</template>

Reach the underlying Chart (drawings, trading, execution adapters, plugins, resizable panes) via @ready or the template ref's getChart(). See the main docs.

License

MIT