ChartGPU – Hochleistungs-Chartbibliothek auf WebGPU-Basis (rendert 1 Mio. Punkte mit 60 fps)

• Eine Open-Source-Chartbibliothek, die mithilfe von WebGPU große Datensätze flüssig rendert
• In TypeScript geschrieben und unterstützt verschiedene Serientypen wie Linie, Fläche, Balken, Scatter, Kreis und Candlestick
• Integrierte Interaktionsfunktionen wie Hover-Highlighting, Tooltips, Crosshair, Zoom-Gesten und Theme-Presets
• Mit dem React-Integrationspaket (chartgpu-react) auch in React-Umgebungen einfach einsetzbar
• WebGPU-beschleunigtes Rendering liefert eine Leistung auf dem Niveau von 60 Bildern pro Sekunde und eignet sich damit gut für die Visualisierung großer Datenmengen

---

Überblick

• ChartGPU ist eine Hochleistungsbibliothek für Chart-Rendering auf WebGPU-Basis, mit der sich große Datenmengen flüssig visualisieren lassen
  • Entwickelt in TypeScript und veröffentlicht unter der MIT-Lizenz
  • Installation mit dem Befehl npm install chartgpu möglich

Hauptfunktionen

• WebGPU-beschleunigtes Rendering hält auch bei großen Datensätzen hohe FPS-Werte
• Unterstützung für verschiedene Diagrammtypen: line, area, bar, scatter, pie, candlestick
• Integrierte Interaktionsfunktionen: hover highlight, tooltip, crosshair
• Unterstützung für Streaming-Updates von Daten (appendData(...))
• Zoom auf der X-Achse verfügbar (einschließlich Gesten und Slider-UI)
• Theme-Presets (dark / light) sowie benutzerdefinierte Themes werden unterstützt

Architektur

• ChartGPU.create(...) verwaltet den Canvas- und WebGPU-Lebenszyklus, während der Render Coordinator die Rendering-Abstimmung übernimmt
• Die interne Struktur besteht aus den folgenden Schichten
  • WebGPU Core: Initialisierung von GPU-Adapter und -Gerät, Konfiguration des Canvas
  • Render Coordinator: Layout, Skalierung, Daten-Upload und Verwaltung der Render-Passes
  • GPU Renderers: Renderer für die jeweiligen Diagrammtypen wie Grid, Area, Bar, Scatter, Line, Pie und Candlestick
  • Shaders(WGSL): Shader-Dateien passend zu den jeweiligen Renderern
  • Chart Sync: bietet Crosshair-Synchronisierung zwischen mehreren Charts

React-Integration

• Paket chartgpu-react für React verfügbar
• Installation: npm install chartgpu-react

Browser-Unterstützung

• Erfordert einen Browser mit aktiviertem WebGPU
  • Unterstützung für Chrome 113+, Edge 113+, Safari 18+
  • Firefox befindet sich derzeit in Entwicklung