v1.9.0 renderizador com dois canvas, deslocamento livre

O motor de gráficos para apps de trading.

De candles a Renko, 95 indicadores, 69 ferramentas de desenho, dados ao vivo de exchanges e ordens no gráfico. Desenhado em Canvas2D, sem nenhuma dependência. Use o ChartWidget completo ou construa sua própria interface sobre o Chart headless.

Começar Ver exemplos

Vanilla TSReactVueSvelte

CONECTANDO · BINANCE · BTCUSDT · 5m Arrastar deslocarRolar zoomArrastar eixo escala

17: tipos de gráfico
85: indicadores
40: ferramentas de desenho
0: dependências de runtime
≈100kB: gzip, núcleo headless
<0.3ms: quadro de hover com 100k barras

Laboratório de recursos

Cada recurso em um gráfico ao vivo.

Escolha uma cena. Cada uma abre o ChartWidget completo em um estado que mostra uma área em ação — depois é com você: arraste, desenhe e troque de ativo ou de tempo gráfico.

Ferramentas de Fibonacci e Gann com níveis próprios, ondas de Elliott, padrões harmônicos, notas e pincéis. Clique duplo em um desenho abre suas configurações e clique direito, seu menu; os alertas acompanham as linhas de tendência, e a ferramenta de posição comprada/vendida calcula o tamanho da posição.

Ferramentas de Fibonacci e Gann com níveis próprios, ondas de Elliott, padrões harmônicos, notas e pincéis. Clique duplo em um desenho abre suas configurações e clique direito, seu menu; os alertas acompanham as linhas de tendência, e a ferramenta de posição comprada/vendida calcula o tamanho da posição.

Role até aqui para iniciar o gráfico ao vivo

Troque de ativo ou de tempo gráfico para cronometrar

Experimente

Dê um clique duplo na retração de Fibonacci e edite seus níveis
Clique direito em um desenho: avance-o, agrupe-o ou adicione um alerta
Escolha o pincel ou a ferramenta de caminho; Enter encerra um caminho

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 os tipos de gráfico, ao vivo na página

Cada bloco é uma instância real de Chart, não uma imagem. Arraste para deslocar, role para dar zoom e passe o mouse para ver a mira; cada bloco responde de forma independente.

Candles OHLC

Heikin-Ashi Tendência

Área Fechamento

Linha de base Acima / abaixo

Barras OHLC Clássico

Linha em degraus Discreto

Por dentro

Medido, documentado e pronto para você estender

O motor por trás do Laboratório de recursos. Todos os números abaixo podem ser reproduzidos com pnpm bench.

Orçamento por quadro

0.001ms: tick ao vivo com 4 indicadores em 100k barras
27ms: recálculo completo após trocar de ativo, 100k barras
0.32ms: downsampling LTTB, 100k → 1.600 pontos
<0.3ms: quadro de hover, estável de 500 a 100k barras

Dois canvas empilhados: o hover redesenha só o de cima, que é leve. Cada renderizador percorre apenas as barras visíveis na tela.

Gestos

Arrastar: deslocar, inclusive além da última barra
Rolar: zoom em torno do ponteiro
Pinça: zoom em tela sensível ao toque
Arrastar para a direita: barras antigas carregam conforme você avança
Arrastar um eixo: mudar a escala dele
Ctrl + arrastar: selecionar desenhos
Shift + arrastar: medir
Alt + clique: fixar um tooltip

WidgetUma chamada, interface de trading completa: O ChartWidget traz barra de ferramentas, barra lateral de desenho, lista de observação, alertas, árvore de objetos, janela de dados, replay e uma paleta de comandos (Ctrl+K), em 16 idiomas, do inglês e vietnamita ao chinês, japonês, coreano e árabe.
DadosQualquer feed de mercado: Adaptadores para Binance, Coinbase, Bybit e Kraken já incluídos; WebSocketAdapter e PollingAdapter para todo o resto. Barras antigas carregam conforme você rola para trás; reconecta sozinho e descarta trocas de ativo já superadas.
TradingOrdens no gráfico: ExecutionAdapter com corretora simulada, ordens criadas arrastando, ordens bracket, linhas de stop-loss e take-profit arrastáveis, alertas para webhooks e notificações na área de trabalho.
FrameworksReact, Vue e Svelte: @tradecanvas/react, /vue e /svelte envolvem o mesmo motor com props reativas e tipadas. A instância completa do Chart fica a uma ref de distância.
PluginsEstenda cada camada: Registre indicadores próprios com update() incremental, ferramentas de desenho, tipos de gráfico e overlays, globalmente ou por gráfico.
AnáliseBacktests ao lado do gráfico: Um Backtester barra a barra com bandas de Monte Carlo e um pipeline de indicadores em Web Worker que mantém a thread principal livre.

Gráficos financeiros

Além dos candles

Sparklines, curvas de patrimônio, profundidade do livro de ofertas, mapas de calor por setor, cascatas e medidores para portfólios e KPIs.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Desempenho do portfólio

Profundidade do livro de ofertas

Mapa de calor do mercado cripto

Atribuição de P&L

Índice de Medo e Ganância

Início rápido

O mesmo gráfico, cinco formas de começar

O widget completo, um componente de framework ou o motor headless. Todos compartilham o mesmo 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,
})

Coloque um gráfico ao vivo no seu app hoje mesmo.

Ler a documentação Dar uma estrela no GitHub