Events

Velo Plot emits events for various chart interactions and state changes.

Subscribing to Events

// Subscribe
chart.on('eventName', handler)

// Unsubscribe
chart.off('eventName', handler)

Available Events

render

Fired after each frame is rendered. Useful for FPS monitoring.

chart.on('render', (data) => {
  console.log(`FPS: ${data.fps}, Frame time: ${data.frameTime}ms`)
})

Property	Type	Description
fps	number	Frames per second
frameTime	number	Time to render frame (ms)

zoom

Fired when the view bounds change (zoom or pan).

chart.on('zoom', (data) => {
  console.log(`X: [${data.x[0]}, ${data.x[1]}]`)
  console.log(`Y: [${data.y[0]}, ${data.y[1]}]`)
})

Property	Type	Description
x	[number, number]	X-axis range [min, max]
y	[number, number]	Y-axis range [min, max]

pan

Fired during panning operations.

chart.on('pan', (data) => {
  console.log(`Panned: ${data.deltaX}, ${data.deltaY}`)
})

Property	Type	Description
deltaX	number	Horizontal pan delta (data units)
deltaY	number	Vertical pan delta (data units)

resize

Fired when the chart container resizes.

chart.on('resize', (data) => {
  console.log(`New size: ${data.width}x${data.height}`)
})

Property	Type	Description
width	number	New width in pixels
height	number	New height in pixels

legendMove

Fired when the legend is dragged to a new position.

chart.on('legendMove', (pos) => {
  // Save position to localStorage
  localStorage.setItem('legendPos', JSON.stringify(pos))
})

Property	Type	Description
x	number	X position in pixels
y	number	Y position in pixels

autoScale

Fired when auto-scale is triggered.

chart.on('autoScale', () => {
  console.log('Chart auto-scaled')
})

Example: FPS Counter

const fpsDisplay = document.getElementById('fps')

chart.on('render', ({ fps }) => {
  const color = fps >= 55 ? '#3fb950' : fps >= 30 ? '#d29922' : '#f85149'
  fpsDisplay.style.color = color
  fpsDisplay.textContent = `${Math.round(fps)} FPS`
})

Example: Sync Multiple Charts

const chart1 = createChart({ container: container1 })
const chart2 = createChart({ container: container2 })

// Sync zoom between charts
chart1.on('zoom', ({ x, y }) => {
  chart2.zoom({ x, y })
})

chart2.on('zoom', ({ x, y }) => {
  chart1.zoom({ x, y })
})

Example: Save/Restore View State

// Save view state
chart.on('zoom', ({ x, y }) => {
  localStorage.setItem('chartView', JSON.stringify({ x, y }))
})

// Restore on load
const saved = localStorage.getItem('chartView')
if (saved) {
  const { x, y } = JSON.parse(saved)
  chart.zoom({ x, y })
}

Known limitations

• Bundle entry — pick velo-plot, velo-plot/trading, velo-plot/scientific, or velo-plot/full. See Bundle Architecture.
• WebGPU renderer (renderer: 'webgpu') requires an extended bundle entry and is experimental — use WebGL (default) for production.
• SVG — exportSVG() and renderer: 'svg' require an extended bundle. LaTeX labels and contour overlays are partial; 3D is not supported in SVG. See SVG examples.
• See Plugin status registry for plugin maturity (complete, partial, experimental).