bonguynvan/tradecanvas

ライブデモ · ドキュメント · サンプル · システム監査 · 変更履歴

English · Tiếng Việt · 简体中文 · 日本語 · 한국어 · Español

Web のための完全なトレーディングチャート。 ローソク足から練行足（Renko）まで、134 種類のインジケーター、73 種類の描画ツール、取引所のライブフィード、チャート上での注文を Canvas 2D または WebGL で描画し、サードパーティの依存関係はありません。完全な ChartWidget をそのまま組み込むことも、ヘッドレスな Chart の上に独自の UI を作ることもでき、TypeScript、React、Vue、Svelte に対応しています。

特長

• 18 種類のチャート、134 のインジケーター、73 の描画ツール。インジケーターの重ね掛け、ラインへのアラート、元に戻す・やり直し。
• チャート上で取引：損益がリアルタイムに動くポジション、ドラッグできる注文と損切り、ペーパーブローカーまたは自前の接続。
• ライブデータ：Binance、Bybit、Coinbase、Kraken を内蔵。独自のフィードも約 20 行で。
• 速い：WebGL で 100 万本のバーを 60 fps でパン。ライブのティックは約 1 マイクロ秒。100 万本の足で毎秒 30,000 件の約定を 10 分間受けてもメモリは増えません（計測）。
• ワークスペース：チャートのグリッド、レイアウト、バーリプレイ、バックテスト。
• 自由にカスタマイズ：テーマ、3 つのルック、114 のスイッチ、プラグイン。30 言語。スマートフォンとアプリ。

ドラッグできる注文：損切り、目標、指値がマウスで動きます。	バーリプレイ：相場を再生し、その上でペーパートレード。
グリッド：最大 6 チャートを銘柄、時間足、クロスヘア、時刻で連動。	あなたのルック：Print（紙とインク、黄金比で）、Studio、Terminal、Capsule、Desk（デスクトップ取引ソフトの画面）、ライトかダーク、または独自のトークン。
	スマートフォンで：指でパン、ズーム、描画、注文のドラッグができ、ウィジェットは小さな画面に合わせて配置を変えます。WebView、React Native、Capacitor、Tauri でも動きます。

クイックスタート

npm install @tradecanvas/chart

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(), // ライブデータ、API キー不要
  trading: true,
})

ヘッドレスの Chart は自前のバー（chart.setData(bars)）を受け取り、画面づくりはあなたに任せます。独自のデータ源は 2 つのメソッド（getBars、subscribeBars）だけの DataFeed として書け、アダプターを渡す場所ならどこでも feed として渡せます。1 つの feed で何枚のチャートにも配信できます。React、Vue、Svelte では @tradecanvas/react、/vue、/svelte が同じ props のコンポーネントとして包みます。

ドキュメント

はじめに · API · インジケーター · 描画ツール · リアルタイム · 取引 · スタイル · フレームワーク · プラグイン · スマートフォンとアプリ · パフォーマンス

ドキュメントは English、Tiếng Việt、简体中文、日本語、한국어、Español で読めます。計測値、制限、テストの方法はシステム監査にあります。

AI コーディングツール

skills/tradecanvas のエージェントスキルは、CI が型チェックするサンプルでコーディングエージェントに API を教えます。Claude Code では:

/plugin marketplace add bonguynvan/tradecanvas
/plugin install tradecanvas@tradecanvas

ほかのエージェント（Cursor、Codex、Copilot など）: npx skills add bonguynvan/tradecanvas。スキルを使わない場合は、llms.txt と llms-full.txt がドキュメントを 1 ファイルでアシスタントに渡します。エージェントで TradeCanvas 自体を変更するなら、リポジトリのルールは AGENTS.md にあります。

MCP サーバー @tradecanvas/mcp は、インジケーター、描画ツール、オプション、機能スイッチ、スタイルキーをライブラリ自身のカタログから調べ、使う前にオプションのオブジェクトを確かめます (ほかのクライアントでの設定):

claude mcp add tradecanvas -- npx -y @tradecanvas/mcp

WSL を使わない Windows では: claude mcp add tradecanvas -- cmd /c npx -y @tradecanvas/mcp. Git Bash（Windows で Claude Code の ! コマンドを実行するシェル）では //c と書きます。/c がパスに書き換えられるためです。

その他

• パッケージ：@tradecanvas/chart（チャートとウィジェット）、react · vue · svelte、バックテスト用の analytics、コーディングエージェント用の mcp。
• プレビュー：すべての pull request と main のコミットが pkg.pr.new に公開され、リリース前にインストールできます。
• ブラウザー：Chrome 80 以降、Edge 80 以降、Firefox 80 以降、Safari 14 以降。
• 法人の方へ：表示すべきロゴも申請もありません。法人の方へのページが IT 審査の質問に答えます。[email protected]
• 関連プロジェクト：bo-grid、トレーディングデスクの表を担う高速な Svelte データグリッド。
• コントリビュート：質問は Discussions、バグは issue へ。pull request は CONTRIBUTING.md を参照。セキュリティの問題は SECURITY.md。
• スポンサー：TradeCanvas は無料で、オープンに開発しています。GitHub Sponsors が開発を支えます。

MIT