bonguynvan/tradecanvas

Demo en vivo · Documentación · Ejemplos · Auditoría del sistema · Registro de cambios

English · Tiếng Việt · 简体中文 · 日本語 · 한국어 · Español

Un gráfico de trading completo para la web. De velas japonesas a Renko, 134 indicadores, 73 herramientas de dibujo, datos en vivo de exchanges y órdenes sobre el gráfico, dibujado con Canvas 2D o WebGL y sin dependencias de terceros. Usa el ChartWidget completo o construye tu propia interfaz sobre el Chart headless, en TypeScript, React, Vue o Svelte.

Lo más destacado

• 18 tipos de gráfico, 134 indicadores, 73 herramientas de dibujo, indicadores sobre indicadores, alertas en líneas, deshacer y rehacer.
• Trading en el gráfico: posiciones con P&L en vivo, órdenes y stops que arrastras, un bróker simulado o el tuyo.
• Datos en vivo de Binance, Bybit, Coinbase y Kraken, o tu propio feed en unas veinte líneas.
• Rápido: un millón de barras desplazadas a 60 fps con WebGL; un tick en vivo en un microsegundo, más o menos; diez minutos de 30.000 operaciones por segundo sobre un millón de barras sin que crezca la memoria (prueba).
• Un espacio de trabajo: cuadrículas de gráficos, diseños, repetición de barras, backtesting.
• A tu medida: temas, tres aspectos, 114 interruptores, plugins; 30 idiomas; móviles y apps.

Órdenes que arrastras: stops, objetivos y límites se mueven con el ratón.	Repetición de barras: reproduce un mercado y opera sobre él en simulado.
Cuadrículas: hasta seis gráficos, enlazados por símbolo, intervalo, cruz o tiempo.	Tu aspecto: Print (papel y tinta, en la proporción áurea), Studio, Terminal, Capsule, Desk (una ventana de plataforma de escritorio), claro u oscuro, o tus propios tokens.
	En el móvil: un dedo desplaza, hace zoom, dibuja y arrastra órdenes, y el widget se reorganiza para una pantalla pequeña. También funciona en un WebView, React Native, Capacitor o Tauri.

Inicio rápido

npm install @tradecanvas/chart

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

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(), // datos en vivo, sin API key
  trading: true,
})

El Chart sin interfaz recibe tus propias barras (chart.setData(bars)) y te deja la interfaz a ti. Una fuente propia es un DataFeed de dos métodos (getBars, subscribeBars), que se pasa como feed donde va un adaptador; un mismo feed sirve a cualquier número de gráficos. Para React, Vue y Svelte, @tradecanvas/react, /vue y /svelte lo envuelven en un componente con las mismas props.

Documentación

Primeros pasos · API · Indicadores · Herramientas de dibujo · Tiempo real · Trading · Estilos · Frameworks · Plugins · Móviles y apps · Rendimiento

La documentación está en English, Tiếng Việt, 简体中文, 日本語, 한국어 y Español. Las mediciones, los límites y cómo se prueba están en la auditoría del sistema.

Herramientas de programación con IA

La skill para agentes de skills/tradecanvas enseña la API a los agentes de programación, con ejemplos cuyos tipos comprueba la CI. En Claude Code:

/plugin marketplace add bonguynvan/tradecanvas
/plugin install tradecanvas@tradecanvas

Otros agentes (Cursor, Codex, Copilot y más): npx skills add bonguynvan/tradecanvas. Sin skill, llms.txt y llms-full.txt dan a un asistente la documentación en un solo archivo. ¿Vas a cambiar TradeCanvas con un agente? Las reglas del repositorio están en AGENTS.md.

El servidor MCP @tradecanvas/mcp busca indicadores, herramientas de dibujo, opciones, interruptores y claves de estilo en el propio catálogo de la biblioteca, y revisa un objeto de opciones antes de usarlo (configuración en otros clientes):

claude mcp add tradecanvas -- npx -y @tradecanvas/mcp

En Windows fuera de WSL: claude mcp add tradecanvas -- cmd /c npx -y @tradecanvas/mcp. En Git Bash, que ejecuta los comandos ! de Claude Code en Windows, escribe //c: Git Bash convierte /c en una ruta.

Más

• Paquetes: @tradecanvas/chart (el gráfico y el widget), react · vue · svelte, y analytics para backtests, y mcp para agentes de programación.
• Versiones preliminares: cada pull request y cada commit en main está en pkg.pr.new, instalable antes de publicarse.
• Navegadores: Chrome 80+, Edge 80+, Firefox 80+, Safari 14+.
• Para empresas: ningún logo que mostrar, nada que solicitar; la página Para empresas responde lo que pregunta una revisión de TI. [email protected]
• Proyectos relacionados: bo-grid, una cuadrícula de datos rápida en Svelte para la mitad tabular de una mesa de trading.
• Contribuir: preguntas en Discussions, errores en los issues, y CONTRIBUTING.md para pull requests. Problemas de seguridad: SECURITY.md.
• Patrocinio: TradeCanvas es gratuito y se desarrolla en abierto; GitHub Sponsors lo mantiene en marcha.

MIT