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.

Small core, fast first frame

The core chart runtime is intentionally compact: the current production build for blazeplot without optional plugin subpaths is about 139 KiB raw / 34 KiB gzip (dist/index.js plus shared chart/render/data chunks after bun run build). Optional UI plugins, React helpers, linked charts, and export 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 chart render work in the project headless Chrome benchmark setup (640×360 canvas, axes/grid disabled, HeadlessChrome 148 with SwiftShader). Chart construction and WebGL program/buffer setup for that case is about 19 ms median.

Versioned footprint and first-draw comparison

Vendor/package-published figures only; no cross-library benchmark runs. Best available value in each metric is bolded.

References: BlazePlot figures are from this release build and local first-frame benchmark described above. Chart.js: v4.5.1 release, npm registry, npmx v4.5.1. Plotly.js: v3.5.0 tree, dist README. LightningChart JS: @arction/lcjs v5.2.1, registry, installation docs, rendering-speed showcase. SciChart.js: v5 docs, registry.

Installation

bun install blazeplot

Quick start

A chart only needs a host element. For regular arrays, wrap your data in a StaticDataset; capacity is only needed when you want a streaming ring buffer.

<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.setViewport({ xMin: x[0], xMax: x[x.length - 1], yMin: -1.5, yMax: 1.5 });
  chart.start();
</script>

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 { chartDataToCSV, chartDataToJSON, exportSelectedChartData, exportVisibleChartData, rollingMean } from "blazeplot/data";
import { downloadBlob } from "blazeplot/export";

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

const selection = selectionPluginHandle.getSelection();
const selectedJson = chartDataToJSON(exportSelectedChartData(chart, selection));

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 section is generated by bun run docs:readme from TypeScript declaration files, JSDoc comments, and built dist/ bundle sizes. Do not edit it by hand.

• Quick start
• Features
• Architecture
• Development
• Plugin authoring
• Theming and responsive layout
• Performance recipes
• Data semantics
• Versioning and migration
• Browser and dependency support
• Example recipes
• Roadmap
• Bundle size summary
• Changelog for v0.3.4

Package entry points

Bundle size summary

Generated from dist/ after the package build. Budgets are enforced by bun run test:bundle-size.

Selected generated declarations

These member tables are generated from TypeScript declarations.

All public exports

Architecture

src/
  core/          # Data model — series, datasets, LOD
  render/        # GPU abstraction + native WebGL2 backend
  interaction/   # Camera, axis ticks, interaction intent types
  ui/            # Orchestrator (Chart)

Contributing

Keep pull requests small and focused. One feature or fix per PR.

Branch flow:

• development is the integration branch for regular work.
• Open feature/fix PRs into development.
• Open release PRs from development into main with the version and changelog already updated.
• Merging an unpublished version to main runs CI, publishes npm, creates the vX.Y.Z tag, and creates the GitHub Release.

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

Release and benchmark workflow details live in docs/release-and-benchmarks.md.