@photonviz/vue

@photonviz/vue

Vue 3 bindings for Photon — GPU-accelerated WebGL2 charts.

· ▶ Live demo · Docs for AI agents

Declarative components over @photonviz/core using provide/inject: a <Plot> container with chart children that stream via setData on reactive data changes.

npm i @photonviz/core @photonviz/vue

Quick start

<script setup lang="ts">
import { Plot, Line, YAxis } from "@photonviz/vue";
defineProps<{ x: Float64Array; y: Float64Array }>();
</script>

<template>
  <div style="height: 320px">
    <Plot :options="{ theme: 'dark' }">
      <YAxis id="power" side="right" color="#f472b6" />
      <Line :x="x" :y="y" color="#60a5fa" :width="2" name="signal" />
    </Plot>
  </div>
</template>

Pass a new typed-array reference to stream — the layer updates 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 :render-type="'static' | 'dynamic'"; pass new typed arrays to stream.

The toolbar includes a one-click download-PNG button; the underlying core Plot also exposes image export (downloadImage() / toDataURL() / toBlob() / copyToClipboard()).

License

MIT · github.com/coredumpdev/photon