3D Charts for JavaScript

Chart.ts brings 3D visualization to JavaScript with the @chartts/gl package. 13 WebGL-powered chart types including Scatter3D, Surface3D, Bar3D, Globe3D, Line3D, and Map3D. Interactive orbit controls, point picking, and smooth 60fps rendering. Works with every framework.

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

// 3D bar chart with orbit controls
<Bar3D
  data={quarterlyRevenue}
  x="region"
  y="revenue"
  z="quarter"
  className="h-96"
  orbit
  colorScale={["#06b6d4", "#8b5cf6"]}
/>

// 3D surface plot for continuous data
<Surface3D
  data={experimentResults}
  x="temperature"
  y="pressure"
  z="yield"
  className="h-96"
  wireframe
  colorScale="viridis"
/>

// Interactive globe
<Globe3D
  data={globalSales}
  lat="latitude"
  lng="longitude"
  value="revenue"
  className="h-96"
  autoRotate
/>

Features

13 WebGL 3D chart types: Bar3D, Scatter3D, Surface3D, Globe3D, Map3D, Line3D, Lines3D, Torus3D, and more
Interactive orbit controls: rotate, zoom, pan
Point picking and hover detection in 3D space
Color scales: viridis, magma, plasma, custom gradients
Wireframe and solid rendering modes
Globe3D with auto-rotation and geographic data projection
TypeScript types for all 3D chart options
Read the DocsSee DemosExamples