WebGL Charts

Chart.ts includes a WebGL rendering engine that auto-activates at 100k+ data points. The @chartts/gl package adds 13 dedicated 3D chart types. GPU-accelerated for millions of data points at interactive frame rates. Automatic fallback to SVG for smaller datasets.

$npm install @chartts/gl
example.tsx
import { Scatter3D, SurfacePlot, Globe3D } from "@chartts/gl"

// WebGL auto-activates for large datasets
const chart = scatter({
  data: largeDataset, // 500k points
  x: "time",
  y: "value",
  renderer: "webgl", // or "auto" (default)
})

// 3D chart types with orbit controls
import { Scatter3D } from "@chartts/gl"

<Scatter3D
  data={measurements}
  x="temperature"
  y="pressure"
  z="yield"
  colorBy="catalyst"
  className="h-96"
  orbit        // drag to rotate
  picking      // click to select points
/>

Features

GPU-accelerated rendering for 100k+ data points at 60fps
13 dedicated 3D chart types (Scatter3D, Surface3D, Bar3D, Globe3D, Map3D, and more)
Auto-switching: SVG for small data, WebGL at 100k+ points
Orbit controls with drag-to-rotate and scroll-to-zoom
Picking and hit detection for interactive 3D selections
Dual canvas system: WebGL data layer + HTML overlay for labels
Works with React, Vue, Svelte, Solid, Angular
Read the DocsSee DemosExamples