A browser-based line chart rendering one million data points smoothly, with a zoom slider tracking the visible range and an FPS counter holding at 60.
Most charting libraries promise speed, then fold like wet cardboard somewhere past 100K points. ChartGPU goes the other way. Throw a million points at it and the thing pans and zooms like the data was painted directly on the glass. The benchmark demo will happily push 35M points at around 72 FPS, and the live-streaming candlestick example chews through 5M candles while new ticks keep rolling in. Line, area, bar, scatter, pie, candlestick. Clean look, sensible defaults, the kind of charts you'd ship without apologizing for them.
The interesting bit is where the work happens. Canvas2D is fundamentally CPU-bound, and even most WebGL chart libraries still do the heavy thinking CPU-side. Hunter Gemmer moved the pipeline wholesale onto the GPU: LTTB downsampling runs as a compute shader, hit-testing for tooltips and crosshairs is GPU-accelerated, and each series renders through a single instanced draw call. The repo is 97% TypeScript, 3% WGSL, which is a polite way of saying most of the file count is plumbing and the actual rendering lives in a handful of small shaders you can read in one sitting.
Worth a proper click-around. Pop open the million-points demo and toggle sampling off for an apples-to-apples run. Dig into src/shaders/ to see the WGSL behind each renderer. Or just npm install chartgpu (plus chartgpu-react if React is your stack) and point it at whatever fire hose of data you've been quietly avoiding.
- Live Demo: https://chartgpu.github.io/ChartGPU/examples
- Source Code: https://github.com/ChartGPU/ChartGPU
- Author: Hunter Gemmer (X, LinkedIn, Dribbble)