@photonviz/wc

Web Components (custom elements) for Photon — GPU-accelerated WebGL2 charts.

Framework-agnostic custom elements over @photonviz/core. Drop them into plain HTML, Angular, or any framework — no dedicated binding required. Import the package once (it auto-registers <photon-plot>, <photon-plot3d>, and <photon-polar>) and configure each element through JS properties. Reassign series to stream: line/scatter/bar/area layers update via setData when the series shape is unchanged.

npm i @photonviz/core @photonviz/wc

Quick start (plain HTML)

<script type="module">
  import "@photonviz/wc"; // registers the elements

  const c = document.getElementById("c");
  c.options = { theme: "dark" };
  c.series = [{ type: "line", x, y, color: "#60a5fa", width: 2 }];
  // reassigning `c.series` streams new data through setData
</script>

<photon-plot id="c" height="320px"></photon-plot>

Each element gives itself display:block and a default height of 320px; set the height attribute (height="480px") or the theme attribute (theme="dark" / "light") to override.

Components

• <photon-plot> — Cartesian. Properties: options (PlotOptions), series (SeriesSpec[]), yAxes (YAxisSpec[]), annotations (Annotation[]).

  series is a discriminated union by type: line · scatter · bar · area · heatmap · box · hexbin · contour · errorbar · stem · quiver · candlestick · ohlc · pie · patches · image · graph, plus finance heikinAshi · renko · volumeProfile.

• <photon-plot3d> — 3D. Properties: options (Plot3DOptions), layers — surface · pointcloud · line3d · bar3d · quiver3d · contour3d · isosurface · volume.

• <photon-polar> — polar. Properties: options (PolarOptions), series — line · scatter.

defineElements() is exported for manual registration (it is called automatically on import, guarded against double-define). The element classes PhotonPlotElement, PhotonPlot3DElement, and PhotonPolarElement are exported too.

License

MIT · github.com/coredumpdev/photon