Create your first GPU-accelerated chart in minutes.

• Chrome 113+, Edge 113+, or Safari 18+ (WebGPU enabled by default)
• Check support: 'gpu' in navigator

npm install chartgpu

npm create vite@latest my-chart -- --template vanilla-ts
cd my-chart && npm install && npm install chartgpu

index.html — container with explicit size:

<div id="chart" style="width: 800px; height: 400px;"></div>
<script type="module" src="/src/main.ts"></script>

src/main.ts:

import { ChartGPU } from 'chartgpu';

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

window.addEventListener('resize', () => chart.resize());
window.addEventListener('beforeunload', () => chart.dispose());

Run npm run dev and open the URL shown.

• Container size: Set explicit width/height (CSS px) on the chart container.
• Async create: ChartGPU.create() returns a Promise — use await.
• DOM ready: Ensure container exists before calling create().

• API Reference — Options, series, axes, tooltip, zoom, themes
• Examples — basic-line, interactive, live-streaming, scatter-density-1m, candlestick-streaming, etc.
• Performance — Sampling, streaming, zoom-aware resampling
• Theming — Built-in themes, custom themes
• Annotations — Reference lines, point markers, interactive authoring

1. Check browser support (Chrome 113+, Edge 113+, Safari 18+)
2. Check console for errors
3. See examples for working code
4. See API docs and troubleshooting