@photonviz/solid

Solid.js 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. Fine-grained and reactive — update a signal and only that layer re-uploads.

npm i @photonviz/core @photonviz/solid

Quick start

import { Plot, Line, Scatter, YAxis } from "@photonviz/solid";
import { createSignal } from "solid-js";

export function Chart(props: { x: Float64Array; y: Float64Array }) {
  return (
    <div style={{ height: "320px" }}>
      <Plot options={{ theme: "dark" }}>
        <YAxis id="power" side="right" color="#f472b6" />
        <Line x={props.x} y={props.y} color="#60a5fa" width={2} name="signal" />
        <Scatter x={props.x} y={props.y} size={4} yAxis="power" />
      </Plot>
    </div>
  );
}
// Pass a signal to a data prop to stream — the layer updates via setData under the hood:
//   const [y, setY] = createSignal(buf);
//   <Line x={x} y={y()} .../>   // setY(next) re-uploads without recreating the layer

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: pass onReady={(plot) => …} to <Plot> (or usePlot() from inside a child) to reach 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