v1.9.0 Zwei-Canvas-Renderer, freies Verschieben

Die Chart-Engine für Trading-Apps.

Von Kerzen bis Renko, 95 Indikatoren, 69 Zeichenwerkzeuge, Live-Daten von Börsen und Orders direkt im Chart. Gezeichnet auf Canvas2D, ohne Abhängigkeiten. Binden Sie das komplette ChartWidget ein oder bauen Sie Ihre eigene Oberfläche auf dem Headless-Chart.

Loslegen Beispiele ansehen

Vanilla TSReactVueSvelte

VERBINDE · BINANCE · BTCUSDT · 5m Ziehen verschiebenMausrad zoomenAchse ziehen skalieren

17: Charttypen
85: Indikatoren
40: Zeichenwerkzeuge
0: Laufzeitabhängigkeiten
≈100kB: gzip, Headless-Kern
<0.3ms: Hover-Frame bei 100k Kerzen

Feature-Lab

Jede Funktion in einem Live-Chart.

Wählen Sie eine Szene. Jede startet das komplette ChartWidget in einem Zustand, der einen Bereich in Aktion zeigt – danach können Sie frei ziehen, zeichnen und wechseln.

Fibonacci- und Gann-Werkzeuge mit eigenen Niveaus, Elliott-Wellen, harmonische Muster, Notizen und Pinsel. Doppelklick auf eine Zeichnung öffnet ihre Einstellungen, Rechtsklick ihr Menü; Alarme folgen Trendlinien, und das Long-/Short-Werkzeug berechnet die Positionsgröße.

Fibonacci- und Gann-Werkzeuge mit eigenen Niveaus, Elliott-Wellen, harmonische Muster, Notizen und Pinsel. Doppelklick auf eine Zeichnung öffnet ihre Einstellungen, Rechtsklick ihr Menü; Alarme folgen Trendlinien, und das Long-/Short-Werkzeug berechnet die Positionsgröße.

Scrollen Sie hierher, um den Live-Chart zu starten

Wechseln Sie Symbol oder Zeiteinheit, um die Zeit zu messen

Zum Ausprobieren

Doppelklicken Sie auf das Fibonacci-Retracement und bearbeiten Sie seine Niveaus
Klicken Sie eine Zeichnung mit der rechten Maustaste an: eine Ebene nach vorne holen, gruppieren oder einen Alarm hinzufügen
Wählen Sie den Pinsel oder das Pfad-Werkzeug; Enter beendet einen Pfad

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

Charttypen

Jeder Charttyp, live auf der Seite

Jede Kachel ist eine echte Chart-Instanz, kein Bild. Ziehen zum Verschieben, Mausrad zum Zoomen, Hovern für das Fadenkreuz; jede Kachel reagiert für sich.

Kerzen OHLC

Heikin-Ashi Trend

Fläche Schlusskurs

Basislinie Darüber / darunter

OHLC-Balken Klassisch

Stufenlinie Diskret

Unter der Haube

Gemessen, dokumentiert, frei erweiterbar

Die Engine hinter dem Feature-Lab. Jede Zahl unten lässt sich mit pnpm bench nachmessen.

Frame-Budget

0.001ms: Live-Tick mit 4 Indikatoren auf 100k Kerzen
27ms: komplette Neuberechnung nach einem Symbolwechsel, 100k Kerzen
0.32ms: LTTB-Downsampling, 100k → 1.600 Punkte
<0.3ms: Hover-Frame, konstant von 500 bis 100k Kerzen

Zwei übereinanderliegende Canvas: Beim Hovern wird nur die schlanke obere neu gezeichnet. Jeder Renderer durchläuft nur die sichtbaren Kerzen.

Gesten

Ziehen: verschieben, auch über die letzte Kerze hinaus
Mausrad: um den Zeiger herum zoomen
Zusammenziehen: auf dem Touchscreen zoomen
Nach rechts ziehen: ältere Kerzen werden laufend nachgeladen
Achse ziehen: sie skalieren
Ctrl + Ziehen: Zeichnungen auswählen
Shift + Ziehen: messen
Alt + Klick: Tooltip anheften

WidgetEin Aufruf, die komplette Trading-Oberfläche: ChartWidget bringt Symbolleiste, Zeichenleiste, Beobachtungsliste, Alarme, Objektbaum, Datenfenster, Replay und eine Befehlspalette (Ctrl+K) mit – in 16 Sprachen, von Englisch und Vietnamesisch bis Chinesisch, Japanisch, Koreanisch und Arabisch.
DatenBeliebige Marktdaten: Adapter für Binance, Coinbase, Bybit und Kraken sind eingebaut; WebSocketAdapter und PollingAdapter decken alles andere ab. Ältere Kerzen werden beim Zurückscrollen nachgeladen; die Verbindung stellt sich selbst wieder her, und überholte Symbolwechsel werden verworfen.
TradingOrders im Chart: ExecutionAdapter mit Paper-Trading-Broker, Orders per Ziehen anlegen, Bracket-Orders, verschiebbare Stop-Loss- und Take-Profit-Linien, Alarme an Webhooks und als Desktop-Benachrichtigung.
FrameworksReact, Vue und Svelte: @tradecanvas/react, /vue und /svelte kapseln dieselbe Engine mit reaktiven, typisierten Props. Die vollständige Chart-Instanz ist nur eine Ref entfernt.
PluginsJede Ebene erweiterbar: Registrieren Sie eigene Indikatoren mit inkrementellem update(), Zeichenwerkzeuge, Charttypen und Overlays – global oder pro Chart.
AnalyseBacktests direkt neben dem Chart: Ein Backtester, der Kerze für Kerze rechnet, mit Monte-Carlo-Bändern, dazu eine Indikator-Pipeline im Web Worker, die den Hauptthread frei hält.

Finanzcharts

Mehr als Kerzen

Sparklines, Equity-Kurven, Orderbuchtiefe, Sektor-Heatmaps, Wasserfall- und Tachodiagramme für Portfolios und KPIs.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Portfolio-Performance

Orderbuchtiefe

Krypto-Markt-Heatmap

GuV-Attribution

Angst-und-Gier-Index

Schnellstart

Ein Chart, fünf Einstiege

Das komplette Widget, eine Framework-Komponente oder die Headless-Engine. Alle nutzen denselben Renderer.

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

Bringen Sie noch heute einen Live-Chart in Ihre App.

Doku lesen Auf GitHub einen Stern geben