WebGPUを駆使したハイパフォーマンスチャート

概要

ChartGPU は、WebGPU をベースに構築された TypeScript のチャーティングライブラリです。大量データでもスムーズでインタラクティブな描画が可能です。

特色

• 🚀 WebGPU アクセラレーション により、大規模データセットでも高 FPS を実現
• 📈 複数系列タイプ：ライン、エリア、バー、散布図、パイ、キャンドルスティック
• 🧭 組み込みインタラクション：ホバーハイライト、ツールチップ、クロスハイダー
• 🔁

  appendData(...)

  （座標系列）でのストリーミング更新
• 🔍 X 軸ズーム（ジェスチャー + オプションのスライダ UI）
• 🎛️ テーマプリセット（

  'dark' | 'light'

  ）とカスタムテーマ対応

アーキテクチャ

高レベルでは、

ChartGPU.create(...)

docs/API.md

flowchart TB
  UserApp["Consumer app"] --> PublicAPI["src/index.ts (Public API exports)"]

  PublicAPI --> ChartCreate["ChartGPU.create(container, options)"]
  PublicAPI --> SyncAPI["connectCharts(charts)"]

  subgraph ChartInstance["Chart instance (src/ChartGPU.ts)"]
    ChartCreate --> SupportCheck["checkWebGPUSupport()"]
    ChartCreate --> Canvas["Create canvas + mount into container"]
    ChartCreate --> Options["resolveOptions(options)"]
    ChartCreate --> GPUInit["GPUContext.create(canvas)"]
    ChartCreate --> Coordinator["createRenderCoordinator(gpuContext, resolvedOptions)"]

    ChartCreate --> InstanceAPI["ChartGPUInstance APIs"]
    InstanceAPI --> RequestRender["requestAnimationFrame (coalesced)"]
    RequestRender --> Coordinator

    InstanceAPI --> SetOption["setOption(...)"]
    InstanceAPI --> AppendData["appendData(...)"]
    InstanceAPI --> Resize["resize()"]

    subgraph PublicEvents["Public events + hit‑testing (ChartGPU.ts)"]
      Canvas --> PointerHandlers["Pointer listeners"]
      PointerHandlers --> PublicHitTest["findNearestPoint() / findPieSlice()"]
      PointerHandlers --> EmitEvents["emit('click'/'mouseover'/'mouseout')"]
    end

    DataZoomSlider["dataZoom slider UI (DOM)"] --> Coordinator
  end

  subgraph WebGPUCore["WebGPU core (src/core/GPUContext.ts)"]
    GPUInit --> AdapterDevice["navigator.gpu.requestAdapter/device"]
    GPUInit --> CanvasConfig["canvasContext.configure(format)"]
  end

  subgraph RenderCoordinatorLayer["Render coordinator (src/core/createRenderCoordinator.ts)"]
    Coordinator --> Layout["GridArea layout"]
    Coordinator --> Scales["xScale/yScale (clip space for render)"]
    Coordinator --> DataUpload["createDataStore(device) (GPU buffer upload/caching)"]
    Coordinator --> RenderPass["Encode + submit render pass"]

    subgraph InternalOverlays["Internal interaction overlays (coordinator)"]
      Coordinator --> Events["createEventManager(canvas, gridArea)"]
      Events --> OverlayHitTest["hover/tooltip hit‑testing"]
      Events --> InteractionX["interaction-x state (crosshair)"]
      Coordinator --> OverlaysDOM["DOM overlays: legend / tooltip / text labels"]
    end
  end

  subgraph Renderers["GPU renderers (src/renderers/*)"]
    RenderPass --> GridR["Grid"]
    RenderPass --> AreaR["Area"]
    RenderPass --> BarR["Bar"]
    RenderPass --> ScatterR["Scatter"]
    RenderPass --> LineR["Line"]
    RenderPass --> PieR["Pie"]
    RenderPass --> CandlestickR["Candlestick"]
    RenderPass --> CrosshairR["Crosshair overlay"]
    RenderPass --> HighlightR["Hover highlight overlay"]
    RenderPass --> AxisR["Axes/ticks"]
  end

  subgraph Shaders["WGSL shaders (src/shaders/*)"]
    GridR --> gridWGSL["grid.wgsl"]
    AreaR --> areaWGSL["area.wgsl"]
    BarR --> barWGSL["bar.wgsl"]
    ScatterR --> scatterWGSL["scatter.wgsl"]
    LineR --> lineWGSL["line.wgsl"]
    PieR --> pieWGSL["pie.wgsl"]
    CandlestickR --> candlestickWGSL["candlestick.wgsl"]
    CrosshairR --> crosshairWGSL["crosshair.wgsl"]
    HighlightR --> highlightWGSL["highlight.wgsl"]
  end

  subgraph ChartSync["Chart sync (src/interaction/createChartSync.ts)"]
    SyncAPI --> ListenX["listen: 'crosshairMove'"]
    SyncAPI --> DriveX["setCrosshairX(...) on peers"]
  end

  InteractionX --> ListenX
  DriveX --> InstanceAPI

デモ

• キャンドルスティックチャート – 金融 OHLC（Open‑High‑Low‑Close）レンダリング。クラシック／ホロウスタイル切替と色カスタマイズが可能。

クイックスタート

import { ChartGPU } from 'chartgpu';

const container = document.getElementById('chart')!;

await ChartGPU.create(container, {
  series: [
    { type: 'line', data: [[0, 1], [1, 3], [2, 2]] },
  ],
});

インストール

npm install chartgpu

React 統合

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

ブラウザ対応（WebGPU 必須）

ドキュメント

• Getting Started –

  docs/API.md

• API Reference –

  docs/API.md

サンプル

サンプルは

examples/

ローカル実行：

npm install
npm run dev   # http://localhost:5176/examples/ が開きます

コントリビュート

CONTRIBUTING.md

ライセンス

MIT –

LICENSE