JSPM

Fast WebGL2 plotting engine for the browser.

Built for people who have hit the performance ceiling of Chart.js, Plotly, and similar browser charting libraries. BlazePlot keeps the hot path GPU-native and the DOM minimal, so large streaming datasets stay interactive instead of turning into a slideshow.

Built on native WebGL2 with no rendering runtime dependency.

Performance

The core chart runtime is intentionally compact: the production build for blazeplot (without optional plugins) is about 152 KiB raw. Optional plugins and helpers ship as separate subpath entries.

Latest manual headed comparison: 2026-05-22T15:20:02.565Z on AMD Ryzen 5 5600H with Radeon Graphics (12 logical CPUs), ANGLE (NVIDIA Corporation, NVIDIA GeForce RTX 3050 Laptop GPU/PCIe/SSE2, OpenGL 4.5.0), Chrome/148.0.7778.167. The harness prewarms each selected library before measured runs (317.4 ms total) and discards 1 setup warmup run(s) before each displayed row. Source: benchmarks/latest.json.

Initial chart ready time in milliseconds (chart construction plus first browser frame after shared data preparation):

Automated pan/stream measurements (no user interaction after launch). Work time uses BlazePlot internal chart frame time when available and otherwise the synchronous library update/redraw call:

BlazePlot vs uPlot runtime ratios. Higher favors BlazePlot; FPS is BlazePlot/uPlot and work p95 is uPlot/BlazePlot:

Full generated benchmark details: docs/benchmarks.md.

Command: bun run bench:compare --width 1600 --height 900

Installation

bun add blazeplot
# or: npm install blazeplot

Quick start

A chart only needs a sized host element and the Chart constructor.

<div id="chart" style="width:100%;height:400px"></div>

<script type="module">
  import { Chart, StaticDataset } from "blazeplot";

  const el = document.getElementById("chart");
  if (!el) throw new Error("Missing #chart element");

  const x = Array.from({ length: 1000 }, (_, i) => i);
  const y = x.map((value) => Math.sin(value * 0.02));

  const chart = new Chart(el);
  chart.addLine({ dataset: new StaticDataset(x, y), name: "sine" });
  chart.fitToData();
  chart.start();
</script>

Dispose the chart when its owning page, component, or panel is removed.

Features

Data export and transforms

Use the tree-shakable blazeplot/data subpath when you only need data helpers. It collects raw rows from the current visible x range, a committed selection plugin state, or the full chart, then serializes them as CSV or JSON.

import { Chart, StaticDataset } from "blazeplot";
import { chartDataToCSV, chartDataToJSON, exportSelectedChartData, exportVisibleChartData, rollingMean } from "blazeplot/data";
import { downloadBlob } from "blazeplot/export";
import { selectionPlugin } from "blazeplot/plugins/selection";

const element = document.getElementById("chart");
if (!element) throw new Error("Missing #chart element");

const x = [0, 1, 2, 3, 4];
const y = [3, 5, 4, 8, 7];
const selection = selectionPlugin();
const chart = new Chart(element, { plugins: [selection] });
chart.addLine({ dataset: new StaticDataset(x, y), name: "requests" });
chart.setViewport({ xMin: 0, xMax: 4, yMin: 0, yMax: 10 });

const visible = exportVisibleChartData(chart);
const csv = chartDataToCSV(visible);

const selectedRange = selection.getSelection();
const selectedJson = selectedRange
  ? chartDataToJSON(exportSelectedChartData(chart, selectedRange))
  : "[]";

const smoothed = rollingMean(visible.series[0]?.samples ?? [], 5);
downloadBlob(new Blob([csv], { type: "text/csv" }), "visible-data.csv");

exportVisibleChartData exports samples in each series' current x viewport by default; pass { includeYRange: true } to require y-viewport overlap. Selection exports follow the selection plugin mode (x-range, y-range, or xy) and include OHLC/candlestick open, high, low, and close columns when available.

API reference

This page is generated from the built package. Use it as an index of import paths and public symbols; the guide pages explain when to use each feature.

Common API map

Guides: Overview, Docs map, Examples, Live data, Data semantics, Performance, Benchmarks, Plugins, Theme & layout, Author plugins, Troubleshooting, Browser, Migration, Roadmap.

Package entry points

The bundle table lists emitted files after Vite code-splitting. Entry rows can be tiny stubs that load shared chunks; use the README performance section for the aggregate core runtime size.

Bundle size summary

Generated from dist/ after the package build.

All public exports

Generated from dist/index.d.ts after the package build.

Development

bun install
bun run dev             # Vite dev server → preview/
bun run ci              # Typecheck + tests + package build + benchmark smoke test
bun run build           # Package build (JS + declarations)
bun test                # Tests
bun run typecheck       # TypeScript strict check
bun run bench:ci        # Headless browser benchmark smoke test
bun run bench:compare   # Manual headed BlazePlot/uPlot/Chart.js comparison benchmark
bun run version:patch   # Prepare package.json + changelog for a patch release PR
bun run release:benchmarks  # Append benchmark results to the current release changelog

Branch flow: development is the integration branch for regular work; open feature/fix PRs into development. Open release PRs from development into main with version and changelog already updated. Release PRs publish npm and create the GitHub Release on merge.

See docs/release-and-benchmarks.md for full workflow details.