Skip to content

browser-support.md

Latest commit

 

History

History
94 lines (67 loc) · 3.54 KB

browser-support.md

File metadata and controls

94 lines (67 loc) · 3.54 KB
Raw

Browser support

BlazePlot targets modern browsers with WebGL2. The plot renderer does not have a Canvas2D or SVG fallback.

Requirements

Feature Used for Notes
WebGL2 Plot rendering Required for every chart. BlazePlot throws WebGL2UnavailableError when a chart cannot create a WebGL2 context.
Pointer Events Built-in interactions Used for pan, zoom, box selection, touch gestures, and plugin hit testing.
ResizeObserver Automatic layout updates Optional. Without it, call chart.resize() after container size changes.
Async Clipboard API + ClipboardItem Clipboard export helpers Optional. Browsers usually require HTTPS and a user gesture. Download helpers still work without clipboard support.

Use Chart.isWebGL2Available() or isWebGL2Available() before creating a chart if your app needs to show fallback UI.

import { Chart, isWebGL2Available } from "blazeplot";

if (isWebGL2Available()) {
  const chart = new Chart(element);
  chart.start();
} else {
  element.textContent = "This chart needs WebGL2.";
}

Unsupported-browser fallback

Keep the fallback outside the chart constructor so users without WebGL2 still get a useful page.

import { Chart, StaticDataset, isWebGL2Available } from "blazeplot";

function renderTelemetryChart(element: HTMLElement, x: number[], y: number[]) {
  if (!isWebGL2Available()) {
    element.replaceChildren(renderStaticFallback(x, y));
    return null;
  }

  const chart = new Chart(element);
  chart.addLine({ dataset: new StaticDataset(x, y), name: "telemetry" });
  chart.fitToData({ padding: 0.05 });
  chart.start();
  return chart;
}

Good fallback options:

  • a small static PNG/SVG generated by your backend;
  • a table or summary statistics for the selected range;
  • a message explaining that WebGL2 is required, with a link to download the data.

Server-side rendering

Charts are browser-only. In SSR apps, create charts after client mount or dynamically import chart components on the client. isWebGL2Available() returns false when document is unavailable, so do not treat a server-side false result as a browser capability check.

import { useEffect, useRef } from "react";
import { Chart, StaticDataset } from "blazeplot";

export function ClientOnlyChart({ x, y }: { x: number[]; y: number[] }) {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!ref.current || !Chart.isWebGL2Available()) return;

    const chart = new Chart(ref.current);
    chart.addLine({ dataset: new StaticDataset(x, y), name: "series" });
    chart.fitToData();
    chart.start();

    return () => chart.dispose();
  }, [x, y]);

  return <div ref={ref} style={{ width: "100%", height: 360 }} />;
}

Tested browsers

  • Chromium is the primary automated test target.
  • Firefox and Safari are expected targets when WebGL2 and Pointer Events are enabled, but browser-specific regressions may need manual verification.
  • Mobile browsers should use touch-friendly interaction options and compact axis/layout settings. See Theming and layout.

Clipboard and downloads

  • downloadChartScreenshot and downloadBlob use object URLs and a temporary anchor element.
  • copyChartScreenshotToClipboard and copyBlobToClipboard require navigator.clipboard.write, ClipboardItem, HTTPS, and usually a user gesture.
  • If clipboard export fails, show a download button that calls downloadChartScreenshot.

Dependencies

The renderer uses native WebGL2 directly and has no runtime rendering dependency.