ChartGPU is a TypeScript charting library built on WebGPU for smooth, interactive rendering—especially when you have lots of data.

Demo

Streaming Multi-Chart Dashboard

Five live charts. Annotations ticking in real time. Latency percentiles, throughput, error rates, resource utilization — all streaming simultaneously at 60 FPS on a single shared GPUDevice. This is what ChartGPU was built for.

Want to build your own? Check out the Multi-Chart Dashboard Cookbook for hands-on recipes and tips to get started!

35M points (benchmark)

35,000,000 points rendered at ~72 FPS (benchmark mode).

Quick Start

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

Annotations

Add reference lines, point markers, and text overlays to highlight important data features:

await ChartGPU.create(container, {
  series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
  annotations: [
    // Horizontal reference line
    {
      id: 'ref-y',
      type: 'lineY',
      y: 2.5,
      layer: 'belowSeries',
      style: { color: '#ffd166', lineWidth: 2, lineDash: [8, 6], opacity: 0.95 },
      label: { text: 'threshold' },
    },
    // Point marker at peak
    {
      id: 'peak',
      type: 'point',
      x: 1,
      y: 3,
      layer: 'aboveSeries',
      marker: { symbol: 'circle', size: 8, style: { color: '#ff4ab0' } },
      label: { template: 'peak={y}', decimals: 2 },
    },
  ],
});

See Annotations Documentation and the annotations example.

Highlights

• 🚀 WebGPU-accelerated rendering for high FPS with large datasets
• 📈 Multiple series types: line, area, bar, scatter, pie, candlestick
• 🌡️ Scatter density/heatmap mode (mode: 'density') for large point clouds — see docs/api/options.md#scatterseriesconfig and examples/scatter-density-1m/
• 📍 Annotation overlays: reference lines (horizontal/vertical), point markers, and text labels — see docs/api/options.md#annotations and examples/annotations/
• 🧭 Built-in interaction: hover highlight, tooltip, crosshair
• 🔁 Streaming updates via appendData(...) with typed-array support (XYArraysData, InterleavedXYData, DataPoint[]) — see examples/cartesian-data-formats/
• 🔌 Line/area segmentation via null data entries — gaps for exchange outages, maintenance windows, etc. connectNulls option bridges gaps — see examples/exchange-gaps/
• 🔍 X-axis zoom (inside gestures + optional slider UI)
• 🎛️ Theme presets ('dark' | 'light') and custom theme support
• 🔗 Shared GPUDevice support for multi-chart dashboards (efficient GPU resource management) — see docs/api/chart.md#shared-gpudevice
• 🧱 Shared pipeline cache for multi-chart dashboards (dedupe shader modules + render pipelines across charts) — see docs/api/chart.md#pipeline-cache-cgpu-pipeline-cache

Candlestick Charts

Financial OHLC (open-high-low-close) candlestick rendering with classic/hollow style toggle and color customization. The live streaming demo renders 5 million candlesticks at over 100 FPS with real-time updates.

Scatter Density (1M points)

GPU-binned density/heatmap mode for scatter plots (mode: 'density') to reveal structure in overplotted point clouds. See docs/api/options.md#scatterseriesconfig and the demo in examples/scatter-density-1m/.

Interactive Annotation Authoring

Full-featured annotation authoring system with interactive editing capabilities. Create, edit, drag, and delete annotations with an intuitive UI. Supports all annotation types: reference lines (horizontal/vertical), point markers, text annotations (plot-space + data-space tracking), labels, and styling options.

Key features:

• Right-click empty space → Add vertical/horizontal line or text note with custom color, style & label
• Click & drag annotations → Reposition them (lines constrained to their axis)
• Right-click on annotation → Edit properties or delete
• Full styling control → Color picker, line style (solid/dashed), line width, and label customization
• Undo/Redo support → All annotations are reversible
• Scroll to zoom, Drag to pan → Standard chart interactions work seamlessly

The annotation authoring system is demonstrated in the examples/annotation-authoring/ example.

Installation

npm install chartgpu

GitHub Packages:

npm install @chartgpu/chartgpu

For GitHub Packages, configure your .npmrc:

@chartgpu:registry=https://npm.pkg.github.com

React Integration

React bindings are available via 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]] }],
      }}
    />
  );
}

See the chartgpu-react repository for full documentation and examples.

Browser support (WebGPU required)

• Chrome 113+ or Edge 113+ (WebGPU enabled by default)
• Safari 18+ (WebGPU enabled by default)
• Firefox: Windows 114+, Mac 145+, Linux nightly

See the gpuweb repository for full Implementation Status

Who's Using ChartGPU

ChartGPU is a young project and we'd love to hear how you're using it! If your team or project uses ChartGPU, open a pull request to add your name here.

Documentation

• Full documentation: Getting Started
• API reference: docs/api/README.md

Examples

• Browse examples: examples/
• Run locally:
  • npm install
  • npm run dev (opens http://localhost:5173/examples/)

Contributing

See CONTRIBUTING.md.

License

MIT — see LICENSE.

Architecture

ChartGPU follows a functional-first architecture. ChartGPU.create(...) owns the canvas and WebGPU lifecycle, delegating render orchestration to a modular render coordinator with 11 specialized modules.

For the full architecture diagram, see docs/ARCHITECTURE.md. For deep internal notes, see docs/api/INTERNALS.md.