@photonviz/react

React bindings for Photon — GPU-accelerated WebGL2 charts.

Declarative components over @photonviz/core: a <Plot> container with chart children that register on mount and stream via setData when you pass new data.

npm i @photonviz/core @photonviz/react

Quick start

import { Plot, Line, Scatter, YAxis } from "@photonviz/react";

export function Chart({ x, y }: { x: Float64Array; y: Float64Array }) {
  return (
    <div style={{ height: 320 }}>
      <Plot options={{ theme: "dark" }}>
        <YAxis id="power" side="right" color="#f472b6" />
        <Line x={x} y={y} color="#60a5fa" width={2} name="signal" />
        <Scatter x={x} y={y} size={4} yAxis="power" />
      </Plot>
    </div>
  );
}
// Pass new x/y arrays to stream — layers update via setData under the hood.

Components

Plot · Line · Scatter · Bar · Area · Heatmap · Box · Hexbin · Contour · ErrorBar · Stem · Quiver · Candlestick · Ohlc · Pie · Patches · Image · Graph · YAxis

Polar — PolarPlot with PolarLine / PolarScatter. 3D — Plot3D with Surface / PointCloud / Line3D / Bar3D / Quiver3D / Contour3D / Isosurface / Volume. Finance — HeikinAshi / Renko / Bollinger / VolumeProfile / Depth, plus re-exported indicators (rsi, macd, sma, ema, wma, vwap, atr, stochastic, keltner, obv, ichimoku, adx, superTrend, fibRetracements). Every layer accepts renderType="static" | "dynamic"; pass new typed arrays to stream.

Imperative escape hatch: const [ref, plot] = usePlot(options) gives you the underlying core Plot — including image export (plot.downloadImage() / toDataURL() / toBlob() / copyToClipboard()); the toolbar also has a one-click download-PNG button.

License

MIT · github.com/coredumpdev/photon