v1.9.0 renderer dua kanvas, geser dengan bebas

Mesin grafik untuk aplikasi trading.

Dari candlestick hingga Renko, 95 indikator, 69 alat gambar, feed bursa langsung, dan order di grafik. Digambar di Canvas2D tanpa dependensi. Pasang ChartWidget yang lengkap, atau bangun UI Anda sendiri di atas Chart yang headless.

Mulai Lihat contoh

Vanilla TSReactVueSvelte

MENYAMBUNG · BINANCE · BTCUSDT · 5m Seret geserGulir zoomSeret sumbu skala

17: jenis grafik
85: indikator
40: alat gambar
0: dependensi runtime
≈100kB: gzip, inti headless
<0.3ms: frame hover pada 100k bar

Lab Fitur

Setiap fitur, di grafik langsung.

Pilih sebuah skenario. Masing-masing menjalankan ChartWidget lengkap dalam kondisi yang menampilkan satu area sedang bekerja — setelah itu, silakan seret, gambar, dan ganti sesuka Anda.

Alat Fibonacci dan Gann dengan level buatan sendiri, gelombang Elliott, pola harmonik, catatan, dan kuas. Klik ganda pada gambar untuk membuka pengaturannya, klik kanan untuk menunya; peringatan mengikuti garis tren, dan alat posisi long/short menghitung ukuran posisi.

Alat Fibonacci dan Gann dengan level buatan sendiri, gelombang Elliott, pola harmonik, catatan, dan kuas. Klik ganda pada gambar untuk membuka pengaturannya, klik kanan untuk menunya; peringatan mengikuti garis tren, dan alat posisi long/short menghitung ukuran posisi.

Gulir hingga terlihat untuk memulai grafik langsung

Ganti simbol atau kerangka waktu untuk mengukur waktunya

Coba ini

Klik ganda pada Fibonacci retracement lalu ubah levelnya
Klik kanan sebuah gambar: bawa maju, kelompokkan, atau tambahkan peringatan
Pilih kuas atau alat jalur; Enter mengakhiri sebuah jalur

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

Jenis grafik

Setiap jenis grafik, langsung di halaman

Setiap petak adalah instans Chart sungguhan, bukan gambar. Seret untuk menggeser, gulir untuk zoom, dan arahkan kursor untuk crosshair; setiap petak merespons sendiri-sendiri.

Candlestick OHLC

Heikin-Ashi Tren

Area Penutupan

Garis dasar Di atas / di bawah

Bar OHLC Klasik

Garis bertingkat Diskret

Di balik layar

Terukur, terdokumentasi, siap Anda kembangkan

Mesin di balik Lab Fitur. Setiap angka di bawah dapat direproduksi dengan pnpm bench.

Anggaran frame

0.001ms: tick langsung dengan 4 indikator pada 100k bar
27ms: hitung ulang penuh setelah ganti simbol, 100k bar
0.32ms: downsample LTTB, 100k → 1600 titik
<0.3ms: frame hover, tetap datar dari 500 hingga 100k bar

Dua kanvas bertumpuk: hover hanya menggambar ulang lapisan tipis di atas. Setiap renderer hanya menelusuri bar yang ada di layar.

Gestur

Seret: geser, juga melewati bar terakhir
Gulir: perbesar/perkecil di sekitar kursor
Cubit: perbesar/perkecil di layar sentuh
Seret ke kanan: bar lama dimuat seiring Anda menggeser
Seret sumbu: skalakan sumbu
Ctrl + seret: pilih gambar
Shift + seret: ukur
Alt + klik: sematkan tooltip

WidgetSatu panggilan, UI trading lengkap: ChartWidget menghadirkan bilah alat, panel samping menggambar, daftar pantauan, peringatan, pohon objek, jendela data, putar ulang, dan palet perintah (Ctrl+K), dalam 16 bahasa, dari bahasa Inggris dan Vietnam hingga Tionghoa, Jepang, Korea, dan Arab.
DataFeed pasar apa pun: Adaptor Binance, Coinbase, Bybit, dan Kraken sudah tersedia; WebSocketAdapter dan PollingAdapter untuk sumber lainnya. Bar lama dimuat saat Anda menggulir mundur; koneksi tersambung ulang dengan sendirinya, dan pergantian simbol yang sudah usang dibuang.
TradingOrder di grafik: ExecutionAdapter dengan broker simulasi, pembuatan order dengan menyeret, order bracket, garis stop-loss dan take-profit yang bisa diseret, peringatan ke webhook, dan notifikasi desktop.
FrameworkReact, Vue, dan Svelte: @tradecanvas/react, /vue, dan /svelte membungkus mesin yang sama dengan props reaktif dan bertipe. Instans Chart yang lengkap tetap bisa dijangkau lewat satu ref.
PluginPerluas setiap lapisan: Daftarkan indikator kustom dengan update() inkremental, alat gambar, jenis grafik, dan overlay, secara global atau per grafik.
AnalitikBacktest di samping grafik: Backtester bar demi bar dengan pita Monte Carlo dan pipeline indikator di Web Worker yang menjaga thread utama tetap lega.

Grafik keuangan

Lebih dari sekadar candlestick

Sparkline, kurva ekuitas, kedalaman buku order, peta panas sektor, grafik air terjun, dan meteran untuk portofolio dan KPI.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Kinerja portofolio

Kedalaman buku order

Peta panas pasar kripto

Atribusi laba/rugi

Indeks Ketakutan & Keserakahan

Mulai cepat

Grafik yang sama, lima cara memulai

Widget lengkap, komponen framework, atau mesin headless. Semuanya memakai renderer yang sama.

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

Pasang grafik langsung di aplikasi Anda hari ini.

Baca dokumentasi Beri bintang di GitHub