Open-source WebGL2 charting

Millions of points. Live, in the browser.

Sferic Charts is a GPU-accelerated charting library for real-time and large data: lines, heatmaps, 3D surfaces, polar plots, maps and dashboards behind a fluent TypeScript API. MIT licensed, zero runtime dependencies.

Try the API 70+ examples

Frames per second: -
CPU ms per rendered frame, median: -
Demos running now: 0
WebGL contexts, shared by all of them: 1

A simulated VLF radio receiver. A sferic is the radio impulse from a lightning stroke. This one hears thousands of them, plus tweeks, whistlers and navy transmitters: 48,000 samples a second into the waveform and a 1024-point FFT 50 times a second into the scrolling spectrogram.

Live data

Real feeds, straight into the GPU

Public data sources polled from your browser, with no server and no API keys, plus two streams that never leave your machine: your microphone and this page's own frame timing. Each demo starts when it scrolls into view and stops when it leaves.

Every chart is interactive: drag to pan (or rotate in 3D), hover for values, double-click to reset. To zoom, hold Ctrl (⌘ on a Mac) while scrolling, or click a chart first; on a phone, tap a chart to take control of it. Sliders under a chart change its parameters live.

Physics & mathematics

Simulations that redraw every frame

Numerical models stepped in real time and computations redone on every zoom: a wave tank, chaotic pendulums, quantum orbitals, a fractal you can zoom ten billion times, and the logistic map's road to chaos.

Streaming & scale

Built for data that does not fit in a spreadsheet

A hundred live charts on one canvas, ten million points that still pan smoothly, a million individually colored scatter points and a real-time 3D surface. Heavy demos wait for a click.

Median cost per rendered frame, CPU and GPU (npm run bench; Intel Arc integrated GPU, 1920 × 1080, headless Chrome)
Scenario	ms per frame
10 channels × 1 kHz streaming	3.2
1000 × 1000 heatmap, wheel zooming	3.2
Real-time FFT spectrogram	3.7
10M-point line, wheel zooming	4.3
100 live charts in one dashboard	9.1
1M-point scatter, per-point colors, panning	11.5

Usage

Edit the code, see the chart

Each example is complete: copy it into a project after npm install sferic-charts, with container set to an element (or its id) and theme to one of Themes. Edits re-run automatically; Ctrl+Enter runs at once.

example.ts

Get started

Three lines to a chart

import { sferic, Themes } from 'sferic-charts'

const chart = sferic().ChartXY({ container: 'chart', theme: Themes.storm })
chart.addLineSeries().appendJSON([{ x: 0, y: 1 }, { x: 1, y: 3 }, { x: 2, y: 2 }])

ES module, UMD/CommonJS build and TypeScript declarations included. Requires WebGL2, which every current desktop and mobile browser provides.

One WebGL contextEvery chart on a page shares it and draws into its own canvas, so there is no limit of 16 charts.
Precision at any zoomData is stored per chunk relative to a float64 origin; epoch timestamps zoom to microseconds without jitter.
Rendering on demandNothing is drawn unless data, layout, interaction or an animation changed.
Themes and palettesFive themes, GPU bloom glow, and series palettes checked for color-vision-deficiency separation.

Browse the gallery Read the README npm package