Show HN: ChartGPU – WebGPU-powered charting library (1M points at 60fps)

Summary

High-performance charts powered by WebGPU Documentation | Live Demo | Examples ChartGPU is a TypeScript charting library built on WebGPU for smooth, interactive rendering—especially when you have lots of data. Highlights 🚀 WebGPU-accelerated rendering for high FPS with large datasets 📈 Multiple series types: line, area, bar, scatter, pie, candlestick 🧭 Built-in interaction: hover highlight, tooltip, crosshair 🔁 Streaming updates via appendData(...) (cartesian series) (cartesian series) 🔍 X-axis zoom (inside gestures + optional slider UI) 🎛️ Theme presets ( 'dark' | 'light' ) and custom theme support Architecture At a high level, ChartGPU.create(...) owns the canvas + WebGPU lifecycle, and delegates render orchestration (layout/scales/data upload/render passes + internal overlays) to the render coordinator. For deeper internal notes, see docs/API.md (especially “Render coordinator”). 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 Dat...