概要

ChartGPUは WebGPUベース のTypeScript製チャートライブラリ。 大規模データ でも高FPSで滑らかな描画を実現。 多彩なチャート種別 ・インタラクション・テーマ対応。 React連携やライブデモも用意。 MITライセンスでnpmから 導入可能。

ChartGPUの特徴

• WebGPUアクセラレーション による大規模データの高速描画
• 対応チャート種別 ：折れ線、エリア、棒、散布図、円グラフ、ローソク足
• インタラクション機能 ：ホバー時のハイライト、ツールチップ、クロスヘア
• データストリーミング ：appendData(...)でリアルタイム更新
• X軸ズーム ：ピンチ操作やスライダーUI対応
• テーマ切替 ：ダーク/ライトプリセット、カスタムテーマも可能

基本アーキテクチャ

• ChartGPU.create(...) がcanvasとWebGPUライフサイクルを管理
• レンダーコーディネーター が描画処理（レイアウト、スケール、データ転送、レンダーパス、内部オーバーレイ）を統括
• API詳細や内部設計は docs/API.md 参照

主な処理フロー

• ユーザーアプリ → Public API（src/index.ts） → ChartGPU.create(container, options)
• WebGPUサポートチェック、canvas生成、オプション解決、GPU初期化、レンダーコーディネーター生成
• ChartGPUインスタンスAPI ：setOption, appendData, resize, requestAnimationFrame
• イベント・ヒットテスト ：クリック/マウスオーバー/アウト、findNearestPoint, findPieSlice
• データズームスライダーUI も連携可能

WebGPUコア

• GPUContext でアダプタ/デバイス取得、canvasコンフィグ
• レンダーコーディネーター がレイアウト、スケール、データアップロード、レンダーパス管理
• 内部オーバーレイ ：イベント管理、ヒットテスト、クロスヘア、DOMラベル/ツールチップ表示

GPUレンダラー・シェーダ

• 各種チャート描画 ：Grid, Area, Bar, Scatter, Line, Pie, Candlestick, Crosshair, Highlight, Axis
• WGSLシェーダ で各描画タイプを最適化

チャート同期

• connectCharts で複数チャートのクロスヘア同期
• 'crosshairMove'リッスン、setCrosshairXで相互連携

クイックスタート

• インストール

  npm install chartgpu
  

• 基本利用例

  import { ChartGPU } from 'chartgpu';
  const container = document.getElementById('chart')!;
  await ChartGPU.create(container, {
    series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
  });
  

React連携

• chartgpu-reactパッケージ利用

  npm install chartgpu-react
  

  import { ChartGPUChart } from 'chartgpu-react';
  function MyChart() {
    return (
      <ChartGPUChart options={{
        series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
      }} />
    );
  }
  

• 詳細・サンプル はchartgpu-reactリポジトリ参照

対応ブラウザ

• Chrome 113+ / Edge 113+ （WebGPU標準対応）
• Safari 18+ （WebGPU標準対応）
• Firefox ：未対応（開発中）

ドキュメント・開発

• 公式ドキュメント ：Getting Started, APIリファレンス（docs/API.md）
• サンプル閲覧 ：examples/ ディレクトリ
• ローカル実行

  npm install
  npm run dev
  # http://localhost:5176/examples/
  

• コントリビュート ：CONTRIBUTING.md参照
• ライセンス ：MIT

---

ChartGPU開発の背景と技術的ポイント

• 従来のチャートライブラリ は10万点超でパフォーマンス低下
• Canvas2D はCPU依存がボトルネック
• WebGL製チャート も多くの処理がCPU側
• ChartGPUのコア発想 ：全処理をGPU(WebGPU)へ
  • LTTBダウンサンプリング をコンピュートシェーダ化
  • ヒットテスト （ツールチップ/ホバー）もGPU処理
  • インスタンシング描画 ：1シリーズ1ドローコール
• 結果 ：100万点でも60fpsで滑らかズーム・パン
• ライブデモ ：1Mポイントデモ
• MITライセンス・npm配布 ：npm install chartgpu
• WebGPU内部や設計についての質問歓迎

---

対応チャートタイプまとめ

• Line （折れ線）
• Area （エリア）
• Bar （棒グラフ）
• Scatter （散布図）
• Pie （円グラフ）
• Candlestick （ローソク足・OHLC対応、スタイル/色カスタマイズ）

---

参考リンク集

• 公式ドキュメント・リポジトリ ：docs/API.md, examples/
• Reactバインディング ：chartgpu-react, chartgpu-reactリポジトリ
• ライブデモ ：ChartGPU Live Demo
• npm ：npm install chartgpu
• ライセンス ：MIT