v1.9.0 rendu sur deux canvas, défilement libre

Le moteur de graphiques des applications de trading.

Des chandeliers au Renko, 95 indicateurs, 69 outils de dessin, des flux de marché en direct et des ordres sur le graphique. Dessiné en Canvas2D, sans aucune dépendance. Intégrez le ChartWidget complet ou bâtissez votre propre interface sur le moteur headless Chart.

Commencer Voir les exemples

Vanilla TSReactVueSvelte

CONNEXION · BINANCE · BTCUSDT · 5m Glisser défilerMolette zoomGlisser l’axe échelle

17: types de graphiques
85: indicateurs
40: outils de dessin
0: dépendance d’exécution
≈100kB: gzip, cœur headless
<0.3ms: rendu au survol, 100k barres

Labo des fonctionnalités

Chaque fonctionnalité, sur un graphique en direct.

Choisissez une scène. Chacune lance le ChartWidget complet dans un état qui montre un domaine à l’œuvre — ensuite, il est à vous : faites glisser, dessinez, changez de symbole ou d’unité de temps.

Outils de Fibonacci et de Gann avec vos propres niveaux, vagues d’Elliott, figures harmoniques, notes et pinceaux. Un double-clic sur un dessin ouvre ses paramètres, un clic droit son menu ; les alertes suivent les lignes de tendance, et l’outil de position acheteuse/vendeuse calcule la taille de la position.

Outils de Fibonacci et de Gann avec vos propres niveaux, vagues d’Elliott, figures harmoniques, notes et pinceaux. Un double-clic sur un dessin ouvre ses paramètres, un clic droit son menu ; les alertes suivent les lignes de tendance, et l’outil de position acheteuse/vendeuse calcule la taille de la position.

Faites défiler jusqu’ici pour lancer le graphique en direct

Changez de symbole ou d’unité de temps pour chronométrer le changement

À essayer

Double-cliquez sur le retracement de Fibonacci et modifiez ses niveaux
Faites un clic droit sur un dessin : avancez-le d’un plan, groupez-le ou ajoutez une alerte
Choisissez le pinceau ou l’outil Tracé ; Entrée termine un tracé

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

Types de graphiques

Chaque type de graphique, en direct dans la page

Chaque vignette est une vraie instance de Chart, pas une image. Glissez pour défiler, utilisez la molette pour zoomer et survolez pour afficher le réticule ; chaque vignette réagit indépendamment.

Chandeliers OHLC

Heikin-Ashi Tendance

Aire Clôture

Ligne de base Au-dessus / en dessous

Barres OHLC Classique

Ligne en escalier Discret

Sous le capot

Mesuré, documenté, à vous de l’étendre

Le moteur derrière le Labo des fonctionnalités. Chaque chiffre ci-dessous se reproduit avec pnpm bench.

Budget par image

0.001ms: tick en direct avec 4 indicateurs sur 100k barres
27ms: recalcul complet après un changement de symbole, 100k barres
0.32ms: sous-échantillonnage LTTB, 100k → 1 600 points
<0.3ms: rendu au survol, constant de 500 à 100k barres

Deux canvas superposés : au survol, seul le canvas supérieur, très léger, est redessiné. Chaque moteur de rendu ne parcourt que les barres visibles.

Gestes

Glisser: défiler, y compris au-delà de la dernière barre
Molette: zoomer autour du pointeur
Pincer: zoomer sur écran tactile
Glisser à droite: les barres plus anciennes se chargent au fur et à mesure
Glisser un axe: le mettre à l’échelle
Ctrl + glisser: sélectionner des dessins
Shift + glisser: mesurer
Alt + clic: épingler une info-bulle

WidgetUn appel, toute l’interface de trading: ChartWidget apporte la barre d’outils, la barre latérale de dessin, la liste de suivi, les alertes, l’arborescence des objets, la fenêtre de données, la relecture et une palette de commandes (Ctrl+K), en 16 langues, de l’anglais et du vietnamien au chinois, au japonais, au coréen et à l’arabe.
DonnéesN’importe quel flux de marché: Adaptateurs Binance, Coinbase, Bybit et Kraken intégrés ; WebSocketAdapter et PollingAdapter pour tout le reste. Les barres plus anciennes se chargent quand vous remontez dans le temps ; la reconnexion est automatique et les changements de symbole dépassés sont abandonnés.
TradingDes ordres sur le graphique: ExecutionAdapter avec un courtier simulé, création d’ordres par glisser, ordres bracket, lignes de stop-loss et de take-profit déplaçables, alertes vers des webhooks et notifications de bureau.
FrameworksReact, Vue et Svelte: @tradecanvas/react, /vue et /svelte enveloppent le même moteur avec des props réactives et typées. L’instance Chart complète reste à portée d’une ref.
PluginsChaque couche est extensible: Enregistrez vos propres indicateurs avec update() incrémental, outils de dessin, types de graphiques et superpositions, globalement ou par graphique.
AnalyseDes backtests à côté du graphique: Un Backtester barre par barre avec bandes de Monte-Carlo, et un pipeline d’indicateurs dans un Web Worker qui laisse le thread principal libre.

Graphiques financiers

Au-delà des chandeliers

Sparklines, courbes de capital, profondeur du carnet d’ordres, cartes de chaleur sectorielles, cascades et jauges pour les portefeuilles et les KPI.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Performance du portefeuille

Profondeur du carnet d’ordres

Carte de chaleur du marché crypto

Attribution du P&L

Indice de peur et d’avidité

Démarrage rapide

Un même graphique, cinq points d’entrée

Le widget complet, un composant de framework ou le moteur headless. Tous partagent le même moteur de rendu.

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

Ajoutez un graphique en direct à votre app dès aujourd’hui.

Lire la documentation Ajouter une étoile sur GitHub