v1.9.0 renderizador de dos canvas, desplazamiento libre

El motor de gráficos para apps de trading.

De velas a Renko, 95 indicadores, 69 herramientas de dibujo, datos en vivo de exchanges y órdenes en el gráfico. Dibujado en Canvas2D sin dependencias. Integra el ChartWidget completo o crea tu propia interfaz sobre el Chart headless.

Empezar Ver ejemplos

Vanilla TSReactVueSvelte

CONECTANDO · BINANCE · BTCUSDT · 5m Arrastrar desplazarRueda zoomArrastrar eje escalar

17: tipos de gráfico
85: indicadores
40: herramientas de dibujo
0: dependencias en tiempo de ejecución
≈100kB: gzip, núcleo headless
<0.3ms: fotograma al pasar el cursor, 100k barras

Laboratorio de funciones

Cada función, en un gráfico en vivo.

Elige una escena. Cada una arranca el ChartWidget completo en un estado que muestra un área en acción; después es tuyo para arrastrar, dibujar y cambiar.

Herramientas de Fibonacci y Gann con tus propios niveles, ondas de Elliott, patrones armónicos, notas y pinceles. Doble clic en un dibujo abre su configuración y clic derecho, su menú; las alertas siguen las líneas de tendencia, y la herramienta de posición larga/corta calcula el tamaño de la posición.

Herramientas de Fibonacci y Gann con tus propios niveles, ondas de Elliott, patrones armónicos, notas y pinceles. Doble clic en un dibujo abre su configuración y clic derecho, su menú; las alertas siguen las líneas de tendencia, y la herramienta de posición larga/corta calcula el tamaño de la posición.

Desplázate hasta aquí para iniciar el gráfico en vivo

Cambia de símbolo o de temporalidad para medir el tiempo

Prueba esto

Haz doble clic en el retroceso de Fibonacci y edita sus niveles
Haz clic derecho en un dibujo: tráelo adelante, agrúpalo o añade una alerta
Elige el pincel o la herramienta de ruta; Enter termina una ruta

chart.addDrawing({
  type: 'riskReward',               // Long/Short Position
  anchors: [entry, stop],           // { time, price } each
  options: { accountSize: 10_000, risk: 1, rewardRatio: 2 },
})
chart.addDrawingAlert(trendLine, { condition: 'crossing' })
chart.groupDrawings([fib, note], 'Swing')

Tipos de gráfico

Todos los tipos de gráfico, en vivo en la página

Cada recuadro es una instancia real de Chart, no una imagen. Arrastra para desplazar, usa la rueda para hacer zoom y pasa el cursor para ver la cruz; cada recuadro responde por su cuenta.

Velas OHLC

Heikin-Ashi Tendencia

Área Cierre

Línea base Encima / debajo

Barras OHLC Clásico

Línea escalonada Discreto

Bajo el capó

Medido, documentado y listo para ampliar

El motor que impulsa el Laboratorio de funciones. Cada cifra de abajo se puede reproducir con pnpm bench.

Presupuesto por fotograma

0.001ms: tick en vivo con 4 indicadores sobre 100k barras
27ms: recálculo completo tras cambiar de símbolo, 100k barras
0.32ms: submuestreo LTTB, 100k → 1,600 puntos
<0.3ms: fotograma al pasar el cursor, constante de 500 a 100k barras

Dos canvas superpuestos: al pasar el cursor solo se repinta el fino canvas superior. Cada renderizador recorre solo las barras en pantalla.

Gestos

Arrastrar: desplazar, también más allá de la última barra
Rueda: zoom alrededor del puntero
Pellizcar: zoom en una pantalla táctil
Arrastrar a la derecha: las barras antiguas se cargan sobre la marcha
Arrastrar un eje: escalarlo
Ctrl + arrastrar: seleccionar dibujos
Shift + arrastrar: medir
Alt + clic: fijar un tooltip

WidgetUna llamada, toda la interfaz de trading: ChartWidget trae la barra de herramientas, la barra lateral de dibujo, la lista de seguimiento, las alertas, el árbol de objetos, la ventana de datos, la repetición y una paleta de comandos (Ctrl+K), en 16 idiomas, del inglés y el vietnamita al chino, el japonés, el coreano y el árabe.
DatosCualquier fuente de mercado: Adaptadores integrados para Binance, Coinbase, Bybit y Kraken; WebSocketAdapter y PollingAdapter para todo lo demás. Las barras antiguas se cargan al desplazarte hacia atrás; se reconecta solo y descarta los cambios de símbolo que han quedado obsoletos.
TradingÓrdenes en el gráfico: ExecutionAdapter con un bróker simulado, órdenes creadas arrastrando, órdenes bracket, líneas de stop-loss y take-profit arrastrables, alertas a webhooks y notificaciones de escritorio.
FrameworksReact, Vue y Svelte: @tradecanvas/react, /vue y /svelte envuelven el mismo motor con props reactivas y tipadas. La instancia completa de Chart sigue a una ref de distancia.
PluginsAmplía cada capa: Registra indicadores personalizados con update() incremental, herramientas de dibujo, tipos de gráfico y superposiciones, de forma global o por gráfico.
AnalíticaBacktests junto al gráfico: Un Backtester barra a barra con bandas de Monte Carlo y un pipeline de indicadores en un Web Worker que deja libre el hilo principal.

Gráficos financieros

Más allá de las velas

Sparklines, curvas de capital, profundidad del libro de órdenes, mapas de calor por sector, gráficos de cascada y medidores para carteras y KPI.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Rendimiento de la cartera

Profundidad del libro de órdenes

Mapa de calor del mercado cripto

Atribución de P&L

Índice de miedo y codicia

Inicio rápido

El mismo gráfico, cinco formas de empezar

El widget completo, un componente de framework o el motor headless. Todos comparten un mismo renderizador.

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  adapter: new BinanceAdapter(),
  locale: 'en',            // 14 languages: 'vi', 'ja', 'zh'…
  trading: true,
})

Pon un gráfico en vivo en tu app hoy mismo.

Leer la documentación Dar una estrella en GitHub