GeezerVison

WebGPU charting library for large datasets, real-time streaming, multi-chart dashboards, and 3D series. MIT licensed. Zero npm runtime dependencies.

Live demo · Docs · API · Examples

ChartGPU renders charts with WebGPU (not Canvas2D or WebGL). It is aimed at:

• Dense time series and multi-million-point series
• Streaming updates (appendData with optional ring capacity)
• Shared-device multi-chart dashboards
• 2D series plus cartesian3d (pointCloud3d, surface3d)

There is no WebGL/Canvas fallback. Unsupported browsers must be gated by the host app.

Streaming multi-chart wall (shared GPU device):

Streaming dashboards · Multi-chart cookbook · Live examples

Scatter density	Candlestick / OHLC	Annotations

npm install @chartgpu/chartgpu

Also published as unscoped chartgpu (same version line). React bindings: chartgpu-react (npm i chartgpu-react @chartgpu/chartgpu).

import { ChartGPU } from '@chartgpu/chartgpu';

const el = document.getElementById('chart')!;
const chart = await ChartGPU.create(el, {
  series: [{
    type: 'line',
    data: {
      x: new Float64Array([0, 1, 2]),
      y: new Float64Array([1, 3, 2]),
    },
  }],
});

// Prefer column-shaped x/y at scale; object/[x,y] tuples are fine for small demos
const x = new Float64Array([3, 4, 5]);
const y = new Float64Array([2.5, 2.1, 2.8]);
chart.appendData(0, { x, y }, { maxPoints: 50_000 });

Requires a WebGPU-capable browser (see Browser support).

• Streaming — appendData with optional maxPoints ring (FIFO). Heatmap and 3D surfaces use dedicated update APIs (updateHeatmap, updateSurface3D) rather than full option rewrites every tick.
• Sampling — LTTB / min / max on the CPU; eligible line series can run decimation on the GPU. Nulls create gaps; optional connectNulls. performance.lod: auto | strict.
• Multi-chart — Share one GPUDevice and pipeline cache across charts (≥3 recommended). Zoom sync via connectCharts.
• Interaction — Zoom, pan, multi-axis Y scales, dark/light/custom themes, annotations.
• 3D — coordinateSystem: 'cartesian3d' with pointCloud3d and surface3d.
• Dependencies — Zero npm runtime dependencies. MIT license for commercial embedding.

Architecture notes: docs/ARCHITECTURE.md. Performance guide: chartgpu.io/docs/performance. Theming: chartgpu.io/docs/theming.

Full options: API — options.

For three or more charts on one page, create a single adapter/device/pipeline cache and pass it into each ChartGPU.create. Charts do not destroy a shared device on dispose.

import { ChartGPU, createPipelineCache, connectCharts } from '@chartgpu/chartgpu';

if (!navigator.gpu) {
  throw new Error('WebGPU not available');
}

const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
if (!adapter) throw new Error('No GPU adapter');

const device = await adapter.requestDevice();
const pipelineCache = createPipelineCache(device);
const ctx = { adapter, device, pipelineCache };

const a = await ChartGPU.create(document.getElementById('a')!, {
  series: [{ type: 'line', data: { x: new Float64Array([0]), y: new Float64Array([0]) } }],
}, ctx);
const b = await ChartGPU.create(document.getElementById('b')!, {
  series: [{ type: 'line', data: { x: new Float64Array([0]), y: new Float64Array([0]) } }],
}, ctx);
const c = await ChartGPU.create(document.getElementById('c')!, {
  series: [{ type: 'line', data: { x: new Float64Array([0]), y: new Float64Array([0]) } }],
}, ctx);

connectCharts([a, b, c], { syncZoom: true });
// Optional: setRenderMode('external') + renderFrame() for a single app rAF loop

Recipes: multi-chart cookbook · streaming dashboards.

WebGPU only. No WebGL path.

Detect navigator.gpu before creating charts. Do not leave an unsupported user on a blank canvas without UI.

If you need Canvas/SVG or dual WebGL+WebGPU backends, use a library that ships those fallbacks.

npm install
npm run dev
# open the examples URL printed by the dev server

See CONTRIBUTING.md and docs/ARCHITECTURE.md.

MIT. Free for commercial use. No npm runtime dependencies.