Primeros pasos

Instala TradeCanvas y muestra un gráfico en menos de un minuto.

Instalación

Usa el gestor de paquetes que prefieras:

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

Widget listo para usar

ChartWidget es el camino más rápido hacia un gráfico funcional. Muestra una interfaz de trading completa dentro de cualquier elemento contenedor —barra de herramientas, barra lateral de dibujo, cuadro de configuración, barra de estado— sin depender de ningún framework.

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

De serie, el widget admite todos los gestos de un trader profesional: arrastrar más allá de la última barra hacia el espacio futuro vacío, arrastrar los ejes de precio/tiempo para escalar, Ctrl/⌘+arrastrar para seleccionar varios dibujos, Shift+arrastrar para medir, Alt+clic para fijar la información de una barra, Ctrl/⌘+K para la paleta de comandos, Ctrl/⌘+P para buscar símbolos y ? para ver la lista completa de atajos.

Chart sin interfaz

Para controlar por completo la interfaz que lo rodea, usa directamente la clase Chart, de más bajo nivel. Tú pones la barra de herramientas y conservas todas las funciones:

import { Chart } from '@tradecanvas/chart'

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

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

Envoltorios para frameworks

Los envoltorios para React, Vue y Svelte están en la sección de frameworks.

Siguientes pasos