Fast time-series charts for the browser: GPU-accelerated, with an automatic Canvas 2D fallback.

BlazePlot is for datasets that outgrow general-purpose charting libraries: millions of points, live streams, and dense zoomable views. It draws on the GPU through raw WebGL2 with no rendering runtime dependency and falls back to Canvas 2D on its own when WebGL2 is unavailable (renderer: "auto" is the default). The DOM is used only for axis labels and optional plugin UI.

Live previews | Documentation | Examples | Benchmarks

Installation

bun add blazeplot
# or: npm install blazeplot

Works in Chrome and Edge 93+, Firefox 92+, and Safari 15.4+. WebGL2 is used when available and Canvas 2D otherwise (see Browser support). Using React, Vue, Svelte, or an SSR framework? See Framework integration.

Quick start

A chart needs a sized host element. Add optional plugins from blazeplot/plugins/*.

import { Chart } from "blazeplot";
import { interactionsPlugin } from "blazeplot/plugins/interactions";
import { tooltipPlugin } from "blazeplot/plugins/tooltip";

const el = document.getElementById("chart"); // give it an explicit height, e.g. 400px
if (!el) throw new Error("Missing #chart host");

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

const chart = new Chart(el, { theme: "auto", plugins: [interactionsPlugin(), tooltipPlugin()] }); // theme: "auto" follows prefers-color-scheme
chart.addLine({ x, y, name: "sine" });
chart.fitToData();
chart.start();

// Later, when the page, component, or panel is removed:
chart.dispose();

For streaming data, pass capacity to addLine and append samples; see Live data. More recipes are in Examples.

Performance

The core runtime (import { Chart } from "blazeplot", without optional plugins) is about 221 KiB raw. Plugins and helpers ship as separate subpath entries.

Panning a 1M-point line runs at 1,090 fps, against 721 for uPlot and 546 for Chart.js (Chrome 153, AMD Ryzen 7 7800X3D, AMD Radeon RX 9070, median of 7 runs).

The benchmarks page covers seven common scenarios, including the ones where uPlot is faster. Every metric with spreads is in docs/benchmark-results.md. Reproduce with bun run bench:compare.

Features

• WebGL2 rendering with a Canvas 2D fallback. Plots draw on the GPU, or on Canvas 2D when WebGL2 is unavailable (renderer: "auto", the default). Axis labels and grid use DOM layers with DPR-aware sizing.
• Many charts on one page. renderer: "shared" draws every chart through one WebGL context, so dashboards are not limited by the browser's per-page context cap.
• Series types. Line, area, scatter, bar, histogram (addBar with HistogramDataset), OHLC, and candlestick, each with independent data, style (series.setStyle), and visibility.
• Live and large data. Streaming ring buffers (including fixed-rate UniformRingBuffer), static typed arrays, and a custom dataset contract for remote or procedural sources.
• Level-of-detail downsampling. Min/max extraction keeps dense views accurate at any zoom; ServerSampledDataset renders server-reduced buckets directly.
• Plugins. Legend, tooltip, interactions (pan, zoom, reset, keyboard, touch), annotations, selection, crosshair, navigator, accessibility, and flame graph, built on the same public APIs available to custom plugins. Touch pan is cooperative by default (one finger scrolls the page, two fingers pan and pinch), and wheelZoom: "modifier" keeps the wheel for page scrolling.
• Accessibility. Charts are named figures with a generated data summary, focus rings, and forced-colors support; interactionsPlugin adds keyboard pan/zoom, and blazeplot/plugins/a11y adds a hidden data table and a keyboard inspection cursor. Built-in text can be localized (see Accessibility).
• Linked charts. blazeplot/linked synchronizes multi-panel layouts.
• Export. chart.screenshot(), CSV/JSON data export, and pure transform helpers (see Export image and data).
• Diagnostics. chart.getFrameStats() reports fps, frame time, rendered points, draw calls, upload bytes, and render mode.

Documentation

Guides: Overview, Docs map, Examples, Frameworks, Live data, Data semantics, Performance, Benchmarks, Benchmark results, Plugins, Theme & layout, Author plugins, Troubleshooting, Browser, Migrating to 1.0, Migration, Stability, Errors, Accessibility, Roadmap.

Package entry points

Import	Contents
blazeplot	Chart, datasets, data contracts, theming, and renderer selection.
blazeplot/linked	Multi-panel layouts with shared X and per-panel plugins.
blazeplot/data	Pure, chart-agnostic data transforms (binning, rolling mean).
blazeplot/export	Chart data export (CSV/JSON-ready rows) and screenshot download/clipboard helpers.
blazeplot/plugins/legend	Built-in legend plugin.
blazeplot/plugins/tooltip	Built-in tooltip plugin.
blazeplot/plugins/interactions	Built-in pan, zoom, axis interaction, and reset plugin.
blazeplot/plugins/annotations	Built-in annotation overlay plugin.
blazeplot/plugins/selection	Built-in brush/range selection plugin.
blazeplot/plugins/crosshair	Built-in crosshair and ruler plugin.
blazeplot/plugins/navigator	Built-in overview/navigator plugin.
blazeplot/plugins/flamegraph	Built-in flame graph and status-span plugin.
blazeplot/plugins/a11y	Built-in accessibility plugin: hidden data table, keyboard inspection cursor, live summary.

Every public export (with kind and summary) and the per-chunk bundle sizes are listed in the API reference.

Development

bun install
bun run dev        # docs and previews site
bun test           # unit tests
bun run typecheck  # strict TypeScript check
bun run lint       # oxlint
bun run build      # package build (JS + declarations)
bun run ci         # full local CI: checks plus browser tests

Open feature and fix PRs against main; releases are separate version-bump PRs. See Release and benchmarks and Documentation contributions for the full workflow.

License

MIT. See LICENSE.