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 139 KiB raw / 34 KiB gzip. Optional plugins and helpers ship as separate subpath entries.

A minimal 1,000-point line chart renders its first frame in about 0.3 ms median / 0.5 ms p95 of render work (640×360 canvas, HeadlessChrome 148, SwiftShader). Chart construction and WebGL setup takes about 19 ms median.

Size and first-draw comparison (vendor-published figures, best value bolded):

References: BlazePlot — this release build and local benchmark. Chart.js — v4.5.1. Plotly.js — v3.5.0. LightningChart JS — v5.2.1. SciChart.js — v5.

Installation

bun add blazeplot
# or: npm install blazeplot

Quick start

A chart only needs a sized host element. createChart(...) accepts simple array data, fits the viewport, and starts rendering for the common first-chart case.

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

<script type="module">
  import { createChart } 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 = createChart(el, {
    series: [{ type: "line", x, y, name: "sine" }],
  });
</script>

Use the lower-level Chart and dataset classes when you need explicit lifecycle control, custom datasets, streaming buffers, or specialized viewport policies.

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: Docs map, Overview, Examples, Data semantics, Performance recipes, Built-in plugins, Plugin authoring, Theming and layout, Troubleshooting, Browser support, 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 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.