1.000.000 de barras: Canvas 2D, depois WebGL
Um milhão de candles de um minuto com Bandas de Bollinger, EMA, RSI e MACD, com o zoom totalmente afastado, deslizando por 150 quadros, desenhados primeiro com Canvas 2D e depois com WebGL 2.
Auditoria do sistema
O que ele faz, e com que velocidade.
Tudo nesta página vem no @tradecanvas/chart 1.30.0. Os tempos por quadro foram medidos no Chrome, em um notebook com GPU integrada (Intel UHD); node scripts/bench-render.mjs, no repositório, roda as mesmas cenas na sua máquina.
Em números
- 18
- tipos de gráfico
- 134
- indicadores integrados
- 69
- ferramentas de desenho
- 30
- idiomas do widget
- 101
- chaves de estilo
- 114
- chaves de recursos do widget
- 0
- dependências de terceiros em runtime
- 3.000+
- testes unitários
Meça na sua máquina
Os números acima vêm do nosso notebook. Estes testes rodam as mesmas cenas no seu navegador, com a biblioteca que você publicaria. Nada é pré-gravado.
Ticks ao vivo em 100.000 barras
Vinte ticks chegam a cada quadro em um gráfico de 100.000 barras com quatro indicadores. Cada indicador se atualiza a partir da última barra em vez de recalcular a série.
Um painel de cotações com 1.000 ativos
bo-grid com 1.000 ativos atualizados 50 vezes por segundo. Cada célula alterada pisca, e só essas células são redesenhadas.
WebGL 2, com Canvas 2D por baixo
renderer: 'webgl'desenha a área do gráfico na GPU: candles, volume, linhas e preenchimentos dos indicadores, o heatmap de profundidade. O texto fica em uma camada de Canvas 2D por cima.'auto'escolhe WebGL sempre que há WebGL 2 disponível.- Onde falta WebGL 2, ou quando o contexto dele é perdido, o mesmo gráfico segue com Canvas 2D. Nada muda no seu código.
- Até 8 gráficos por página desenham com WebGL ao mesmo tempo (
setMaxWebGLCharts); os outros desenham com Canvas 2D e voltam ao WebGL quando um contexto fica livre. - Os candles caem nos mesmos pixels do dispositivo nos dois renderizadores, então um gráfico fica igual, seja qual for o que o desenha.
Tempo por quadro
Tempo para desenhar um quadro enquanto o gráfico desliza. 16,7 ms equivalem a 60 quadros por segundo.
| Gráfico | Proporção de pixels | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 candles + 4 indicadores | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, zoom afastado em 200.000 barras + 4 indicadores | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, zoom afastado em 1.000.000 de barras + 4 indicadores | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, heatmap de profundidade, 240 instantâneos × 80 níveis | 2× | 25,5 ms | 16,8 ms | |
| Seis gráficos, cada um com 500 candles e 2 indicadores | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 candles + 4 indicadores | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 candles + 4 indicadores | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 candles + 4 indicadores | 2× | 114,5 ms | 29,1 ms |
O Canvas 2D é o padrão. renderer: 'webgl' (ou 'auto') desenha a área do gráfico com WebGL 2 e volta ao Canvas 2D onde falta WebGL 2 ou quando o contexto dele é perdido.
Caminho dos dados
- Um tick ao vivo com Bandas de Bollinger, EMA, RSI e MACD em 100.000 barras
- ~0,001 ms
- Os mesmos quatro indicadores recalculados por inteiro em 100.000 barras
- ~27 ms
- Uma linha de 1.000.000 de pontos visíveis, reduzida para um quadro
- ~2,6 ms
- Um redesenho ao passar o mouse (mira, legenda)
- ~0,2 ms
- Uma troca de ativo ou de tempo gráfico só mostra o véu de carregamento depois de
- 200 ms
Tamanho do download
Minificado e com gzip, com tudo o que ele importa.
- Chart, a API headless
- 176 KB
- ChartWidget, a interface completa
- 315 KB
- O renderizador WebGL, carregado no primeiro uso
- 18 KB
Como é verificado
- Mais de 3.000 testes unitários nos sete pacotes rodam no CI a cada pull request.
- O renderizador WebGL desenha os candles nos mesmos pixels do dispositivo que o Canvas 2D; linhas e preenchimentos diferem só em alguns pixels de borda suavizados.
- O renderizador WebGL foi verificado no Chromium, no Firefox e no WebKit. Sem WebGL 2, ou quando o contexto dele é perdido, o gráfico segue com Canvas 2D.
- Os exemplos de código da documentação e da skill para agentes passam por checagem de tipos contra a API real.
- Os gráficos podem ser lidos por leitores de tela e usados pelo teclado; o widget fica da direita para a esquerda em árabe, hebraico e persa.
Recursos
Filtre por área ou busque por nome ou API.
80 de 80
| Recurso | Área | Detalhes e API |
|---|---|---|
| Candles, barras OHLC, linha, área, linha de base, Heikin-Ashi, candles vazados | Tipos de gráfico | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, line break, Kagi, ponto e figura, barras de range | Tipos de gráfico | Tamanho da caixa ou ATR, linhas para o rompimento, reversão em porcentagem ou em preço, range por barra |
| Candles de volume, Equivolume, área HLC, linha em degraus, linha com marcadores, máxima-mínima | Tipos de gráfico | 18 tipos de gráfico no total |
| A série principal oculta | Tipos de gráfico | Só ficam os indicadores e os desenhos |
| Gráficos para dashboards | Tipos de gráfico | Barras (agrupadas, empilhadas, horizontais), rosca e pizza, dispersão e bolhas, histogramas, calendários, matrizes de correlação, mapas por setor, curvas anti-horárias, sparklines, medidores, mapas de calor e treemaps, cascatas, profundidade, curvas de patrimônio |
| Canvas 2D ou WebGL 2 | Renderização | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, o evento rendererChange |
| Um traço por coluna de pixels com zoom afastado | Renderização | Linhas, bandas e histogramas de indicadores abaixo de um pixel por barra |
| Um milhão de barras deslizando com suavidade | Renderização | Com quatro indicadores, em proporção de pixels 2 |
| Heatmap de profundidade, perfil de volume e perfil de mercado na GPU | Renderização | pushDepthSnapshot(book, time) |
| Vários gráficos WebGL em uma página | Renderização | Até 8 (setMaxWebGLCharts); os demais desenham com Canvas 2D; voltam ao WebGL quando o contexto retorna |
| Nítido em qualquer escala de tela | Renderização | Candles, volume e desenhos em pixels do dispositivo a 100%, 125% e 200% |
| Sem dependências de terceiros em runtime | Renderização | Nada mais para instalar ou auditar |
| 134 indicadores integrados | Indicadores | Pivot points de seis tipos, MA Cross, correlação com outro ativo |
| Fonte de preço | Indicadores | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Um indicador sobre outro indicador | Indicadores | Como uma média móvel do RSI, atualizada a cada tick |
| Vários indicadores em um painel, movidos entre painéis | Indicadores | moveIndicatorToPane |
| O mesmo indicador várias vezes | Indicadores | EMA 20 e EMA 50 lado a lado |
| Níveis e limiares | Indicadores | RSI 30/70, CCI ±100, salvos com o layout |
| Último valor no eixo | Indicadores | No eixo de preço e no eixo de cada painel, na cor da linha |
| Painéis recolhidos, maximizados e reordenados | Indicadores | Salvos com o layout |
| Modelos de indicadores | Indicadores | Parâmetros, estilo, níveis e painel, salvos e aplicados juntos |
| Estilo e visibilidade de cada linha | Indicadores | Uma linha oculta não estica a escala; setIndicatorDefaults |
| Delta de volume e CVD | Indicadores | Estimados a partir das barras |
| Exportação dos valores dos indicadores | Indicadores | CSV ou JSON, uma coluna por linha |
| Atualizações incrementais com ticks ao vivo | Indicadores | update() recalcula só a barra em formação |
| 69 ferramentas de desenho | Ferramentas de desenho | Linhas, canais, Fibonacci, Gann, pitchforks, ondas de Elliott, padrões, ciclos, projeções |
| Configurações próprias de cada ferramenta | Ferramentas de desenho | Estilo, propriedades e coordenadas na grade de preços do mercado |
| Posições compradas e vendidas | Ferramentas de desenho | Risco:retorno, quantidade a partir do risco em porcentagem ou em dinheiro |
| Alertas em um desenho | Ferramentas de desenho | Quando o preço cruza uma linha de tendência ou um canal como foi desenhado, inclusive em escala logarítmica |
| Ordem, grupos e modelos | Ferramentas de desenho | Trazer para frente, enviar para trás, agrupar, travar, ocultar |
| Notas, balões, setas, bandeiras, pincel, caminho, curva | Ferramentas de desenho | Desenho à mão livre e de vários pontos |
| VWAP ancorado e perfil de volume de intervalo fixo | Ferramentas de desenho | Leem as barras do gráfico |
| Borracha, zoom por área, ímã forte, atalhos de teclado | Ferramentas de desenho | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Ir para uma data; períodos de 1D a Tudo | Escalas e tempo | Sem limite para afastar o zoom |
| Fusos horários IANA com horário de verão | Escalas e tempo | Ou o fuso da própria bolsa |
| Qualquer tempo gráfico, e barras de tick | Escalas e tempo | 7m, 90m, 2d montados a partir do que o feed fornece; 100T a partir dos negócios dele |
| Escalas à esquerda e à direita; logarítmica, invertida e percentual por painel | Escalas e tempo | A escala da esquerda para uma sobreposição ou uma cópia da escala de preço |
| Comparar ativos, spread e razão | Escalas e tempo | Na própria escala ou painel, alinhados pelo tempo |
| Horário estendido | Escalas e tempo | A partir dos horários de pregão do ativo |
| Formatos de preço e de hora | Escalas e tempo | priceFormat como função ou frações como 1/32; timeFormatter |
| A escala nas casas decimais e no passo de preço do ativo | Escalas e tempo | pricePrecision, minTick: uma ação que se move de 10 em 10 nunca mostra 21.705 |
| Linhas de máxima e mínima, bid e ask | Escalas e tempo | Bid e ask a partir dos ticks do feed |
| Marcas de eventos no gráfico | Escalas e tempo | signalMarkerHover, signalMarkerClick |
| Feeds prontos e os seus | Dados e tempo real | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Histórico mais antigo carregado ao rolar para a esquerda | Dados e tempo real | fetchHistoryBefore |
| Busca de ativos com detalhes | Dados e tempo real | searchSymbols, resolveSymbol: casas decimais, passo de preço, pregões, fuso horário |
| Detalhes do ativo descobertos após a conexão | Dados e tempo real | O evento symbolInfo do adaptador |
| Book de ofertas em escada | Dados e tempo real | Volume de compra e de venda por preço; clique para operar |
| Cotações ao vivo para listas de observação | Dados e tempo real | subscribeQuotes, setQuotes, getQuote |
| Notícias e status do mercado | Dados e tempo real | fetchNews; uma contagem regressiva até a abertura ou o fechamento |
| Regras da bolsa | Dados e tempo real | setMarket: variação mínima por faixa de preço, teto e piso diários, lotes, sessões; HOSE, HNX, UPCoM e futuros do VN30 |
| Ordens e posições no gráfico | Trading | Arraste para modificar; cancele, feche e inverta pela linha |
| Marcas de execução | Trading | Motivo e lucro ou prejuízo em executionFill |
| Boleta | Trading | Quantidade, tipo, stop-loss e take-profit, validade, verificados enquanto você digita; a variação mínima, o teto, o piso e os lotes da bolsa |
| Painel da conta | Trading | Posições com lucro e prejuízo ao vivo, ordens em aberto, execuções |
| Sinais e zonas de trade | Trading | Chaves de estilo markers.*, tradeZones.* |
| Backtesting e métricas de risco | Trading | @tradecanvas/analytics: comissão, slippage, Sharpe, Sortino, Calmar, drawdown |
| Alertas além de um nível de preço | Alertas e replay | Linha cruzando linha, um movimento de N% em N barras, no fechamento da barra, com expiração |
| Replay de barras em passos menores | Alertas e replay | Um tempo gráfico maior reproduzido a partir de barras menores |
| Paper trading no replay | Alertas e replay | Ordens executadas aos preços do replay |
| Replay em uma grade de gráficos | Alertas e replay | Todos em sincronia |
| Replay para aplicações | Alertas e replay | startTime, hideHistory, duration, marcas reveladas conforme avança, replayComplete |
| Uma grade de widgets sincronizados | Área de trabalho | Até 6, compartilhando ativo, tempo gráfico, mira, tempo e desenhos |
| Layouts com nome no seu próprio armazenamento | Área de trabalho | Salvar, abrir, renomear, salvamento automático; LayoutStorage para um servidor |
| Desfazer e refazer para tudo | Área de trabalho | Desenhos, indicadores, configurações e tipo de gráfico; recordUndo |
| Menus de contexto por área | Área de trabalho | Desenhos, área do gráfico, painéis, eixo de preço, eixo de tempo |
| Listas de observação | Área de trabalho | Várias listas, reordenadas arrastando |
| Eventos para a aplicação | Área de trabalho | symbolChange, timeframeChange, ordersChange, executionFill, styleChange e mais |
| Três aparências para o widget | Personalização | Studio, Terminal, Capsule; ui e setUI; variáveis CSS --tcw-* |
| A aparência do gráfico por chave | Personalização | applyOverrides sobre 101 chaves tipadas, numa camada da aplicação e numa do usuário |
| Configurações que alcançam cada chave | Personalização | Uma aba de estilo para o tipo de gráfico em exibição, uma aba de trading |
| 112 chaves de recursos | Personalização | features, setFeatures, isFeatureOn; alteráveis em execução |
| Suas próprias peças no widget | Personalização | Botões e menus suspensos na barra de ferramentas, botões na barra lateral, itens de status, slots, itens de menu |
| Seus próprios atalhos | Personalização | addHotkey de acordo com o layout do teclado |
| O widget em 30 idiomas | Idiomas e acessibilidade | Árabe, hebraico e persa da direita para a esquerda |
| Leitores de tela e teclado | Idiomas e acessibilidade | Um resumo do gráfico, barras lidas uma a uma, diálogos pelo teclado |
| Este site em 14 idiomas e a documentação em seis | Idiomas e acessibilidade | English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย |
| Componentes para React, Vue e Svelte | Desenvolvedores | Props reativas: overrides, indicators, features |
| Plugins | Desenvolvedores | Indicadores, ferramentas de desenho, tipos de gráfico e sobreposições; overlayScale e getPriceStep para desenhar na grade de preços |
| Documentação para agentes de código | Desenvolvedores | llms.txt, llms-full.txt e uma skill para agentes |
Limites conhecidos
- O Canvas 2D continua como renderizador padrão até o WebGL ser testado em mais dispositivos; a taxa de quadros do WebGL no Safari e em telas 5K ainda não foi medida.
- Com proporção de pixels 2 em um gráfico de 2560×1400, só a composição do navegador leva cerca de 23 ms em GPU integrada, então ali os quadros WebGL ficam em média em 29 ms.
- Tempos gráficos de tick são montados com os negócios recentes que o feed retorna; não é possível carregar histórico de ticks mais antigo.
- Delta de volume e CVD são estimados a partir das barras, não do lado de cada negócio.
- No máximo 8 gráficos por página desenham com WebGL ao mesmo tempo; os outros desenham com Canvas 2D.
Construindo uma tela de trading com o TradeCanvas?
Queremos saber.