v1.9.0 2 層キャンバスのレンダラー、自由なパン操作

トレーディングアプリのためのチャートエンジン。

ローソク足から練行足（Renko）まで、95 種類のインジケーター、69 種類の描画ツール、取引所のライブフィード、チャート上での注文。依存関係ゼロの Canvas2D で描画します。完成された ChartWidget をそのまま組み込むことも、ヘッドレスの Chart の上に独自の UI を作ることもできます。

はじめる サンプルを見る

Vanilla TSReactVueSvelte

接続中 · BINANCE · BTCUSDT · 5m ドラッグ パンスクロール ズーム軸をドラッグ 伸縮
17
チャートタイプ
85
インジケーター
40
描画ツール
0
ランタイム依存関係
≈100kB
gzip 時、ヘッドレスコア
<0.3ms
10 万本でのホバー 1 フレーム
機能ラボ

すべての機能を、ライブチャートで。

シーンを選んでください。各シーンは完全な ChartWidget を、ひとつの機能が動いている状態で起動します。あとはドラッグ、描画、切り替えを自由に試せます。

フィボナッチとギャンのツール（レベルは自由に設定可）、エリオット波動、ハーモニックパターン、ノート、ブラシ。描画をダブルクリックすると設定、右クリックするとメニューが開きます。アラートはトレンドラインに追従し、ロング / ショートツールはポジションサイズを計算します。

スクロールして表示するとライブチャートが始まります
シンボルか時間足を切り替えると所要時間を計測します

試してみる

  • フィボナッチ・リトレースメントをダブルクリックして、レベルを編集する
  • 描画を右クリックして、前面へ移動、グループ化、アラートの追加を行う
  • ブラシまたはパスツールを選ぶ。Enter でパスを終了する
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')
チャートタイプ

すべてのチャートタイプを、このページでライブに

各タイルは画像ではなく、本物の Chart インスタンスです。ドラッグでパン、スクロールでズーム、ホバーでクロスヘアを表示。どのタイルも個別に反応します。

ローソク足 OHLC
平均足 トレンド
エリア 終値
ベースライン 上 / 下
OHLC バー クラシック
ステップライン 離散
内部の仕組み

計測済み、文書化済み、自由に拡張可能

機能ラボを支えるエンジンです。以下の数値はすべて pnpm bench で再現できます。

フレーム予算

0.001ms
10 万本・インジケーター 4 つでのライブティック
27ms
シンボル切り替え後の全再計算（10 万本）
0.32ms
LTTB ダウンサンプリング（10 万 → 1,600 点）
<0.3ms
ホバー時のフレーム。500 本から 10 万本まで一定

2 枚のキャンバスを重ねており、ホバー時は上の薄いキャンバスだけを再描画します。どのレンダラーも画面上のバーだけを処理します。

ジェスチャー

ドラッグ
パン（最後のバーより先にも移動可）
スクロール
カーソル位置を中心に拡大縮小
ピンチ
タッチ画面で拡大縮小
右へドラッグ
進むにつれて過去のバーを読み込み
軸をドラッグ
その軸を拡大縮小
Ctrl + ドラッグ
描画を選択
Shift + ドラッグ
計測
Alt + クリック
ツールチップを固定
ウィジェット1 回の呼び出しで完全なトレーディング UI
ChartWidget には、ツールバー、描画サイドバー、ウォッチリスト、アラート、オブジェクトツリー、データウィンドウ、リプレイ、コマンドパレット（Ctrl+K）が揃っています。英語やベトナム語から中国語、日本語、韓国語、アラビア語まで 16 言語に対応しています。
データあらゆる相場フィードに対応
Binance、Coinbase、Bybit、Kraken のアダプターを内蔵し、それ以外には WebSocketAdapter と PollingAdapter を使えます。過去へスクロールすると古いバーを読み込み、自動で再接続し、後の操作で不要になったシンボル切り替えは破棄します。
トレードチャート上で注文
ペーパー取引ブローカー付きの ExecutionAdapter、ドラッグでの注文作成、ブラケット注文、ドラッグできる損切り・利確ライン、Webhook やデスクトップ通知へのアラート。
フレームワークReact、Vue、Svelte
@tradecanvas/react、/vue、/svelte は同じエンジンを、リアクティブで型付きの props でラップします。Chart インスタンス全体にも ref ひとつでアクセスできます。
プラグインすべてのレイヤーを拡張
インクリメンタルな update() を持つカスタムインジケーター、描画ツール、チャートタイプ、オーバーレイを、グローバルまたはチャートごとに登録できます。
分析チャートの隣でバックテスト
モンテカルロのバンドを備えたバー単位の Backtester と、メインスレッドを空けておく Web Worker のインジケーターパイプライン。
金融チャート

ローソク足の、その先へ

ポートフォリオや KPI のための、スパークライン、エクイティカーブ、板の厚み、セクターヒートマップ、ウォーターフォール、ゲージ。

BTC $65,234
+2.4%
ETH $3,412
-1.2%
SOL $148.00
+5.1%
BNB $582.00
+0.8%
ADA $0.4500
-3.2%
DOT $7.23
+1.6%
ポートフォリオの成績
板の厚み
暗号資産市場のヒートマップ
損益の内訳
恐怖・強欲指数
クイックスタート

同じチャートに、5 通りの導入方法

完全なウィジェット、フレームワークのコンポーネント、またはヘッドレスエンジン。どれも同じレンダラーを共有しています。

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

今日から、あなたのアプリにライブチャートを。

ドキュメントを読む GitHub でスター