Examples

Interactive examples demonstrating Velo Plot capabilities.

Interactive Demos

Each example includes a live demo that responds to the documentation theme (try toggling dark/light mode!).

Basic Chart

A simple line chart with 10,000 points demonstrating core features.

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • Right-drag for box zoom

View full example →

---

Real-time Streaming

Continuous data streaming with varying waveforms.

📊 0 points 🚀 0 FPS 📏 Window: 50K

10K20K50K100K∞ Infinite

Scroll to zoom • Drag to pan • Right-drag for box zoom

View full example →

---

Cyclic Voltammetry

Real-time CV simulation with stable X-axis during streaming.

⚡ Ready 🔄 Cycle: 1 / 10 📊 0 mV 📈 0 points Smoothing: 20 Arrow Timeout: 5.0s

1 Cycle3 Cycles5 Cycles10 CyclesInfinite50 mV/s100 mV/s200 mV/s500 mV/s

✨ Notice: X-axis (Potential) remains stable during streaming • Y-axis (Current) auto-scales smoothly

View full example →

---

Inverted Axes

IR-style spectra and other descending domains rendered with invertAxis.

Inverted Axis: IR-Style Spectrum

invertAxis: true

High wavenumbers render on the left, low wavenumbers on the right, while the data stays in ascending order.

Hydroxyl / water band around 3400 cm^-1

Carbonyl-like band around 1715 cm^-1

View full example →

---

Large Datasets

1 million points rendered at 60 FPS.

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • High performance 1M points

View full example →

---

Multiple Series

Multiple data series with different colors.

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • Multiple series support

View full example →

---

Curve Fitting

Automatic trend lines and regression analysis (Linear, Polynomial, etc.).

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • Linear and Polynomial Regression

View full example →

---

Multi-Pane Stack

TradingView-style stack with sync presets, drag resize, and composite indicators (buy/sell line colors).

X sync · Y independent

Four panes — candlesticks, volume, wave indicator, RSI. Pan or zoom on any pane: time (X) stays aligned, each Y scale is independent.

• Wheel on plot area: zoom X + Y on that pane; X propagates to all panes.
• Wheel on the Y-axis strip: zoom only that pane’s Y (not synced).
• Wave line: green above wt2 (buy), red below (sell).
• Drag dividers to resize panes without flicker.

Sync axis X only (Y independent)Y onlyBoth axesNone Cursor sync Export stack:

View full example →

---

SVG Vector Charts

Live renderer: 'svg' and exportSVG() for every 2D series type — line, bar, heatmap, candlestick, gauge, and more.

Line

Continuous polylines with stroke styling.

Ejemplo canvas →

View all SVG series types →

---

Trading Dashboard (v2.0)

Multi-pane trading layout with indicators, drawings, alerts, replay, and business-day time scale.

View full example →

---

Peak Analysis

Baseline correction and area integration for scientific signals.

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • Right-drag for box zoom

View full example →

---

Bar Charts

Categorical and discrete data visualization with automatic layout.

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • Bar charts

View full example →

---

Heatmaps

High-performance 2D intensity maps with customizable color scales.

📊 0 points 🚀 0 FPS

Scroll to zoom • Drag to pan • Heatmap with bilinear interpolation

View full example →

---

Tooltip System

Professional tooltips with themes, animations, and scientific notation.

📊 0 points 🚀 0 FPS

Hover to see tooltips • Scroll to zoom • Drag to pan

View full example →

---

ROI Tools

Interactive tools for selecting and analyzing specific data regions.

Mask Data

Select a tool and draw on the chart to define an ROI

View full example →

---

Quick Links

Example	Description	Key Feature
Basic Chart	Simple line chart	Core API usage
Real-time	Streaming data	requestAnimationFrame
Cyclic Voltammetry	CV simulation	Stable X-axis streaming
Inverted Axes	Descending scientific axes	invertAxis
Large Datasets	1M+ points	WebGL performance
React	React integration	Components & hooks
Curve Fitting	Regression analysis	Trend lines & labels
Peak Analysis	Integration/Baseline	Area calculation
Bar Charts	Categorical data	Automatic width
Multi-Pane Stack	Price / Volume / RSI + sync presets	createStackedChart
SVG Charts	Live vector renderer + export per series type	renderer: 'svg'
Chart Sync	Linked charts (X/Y/XY)	ChartGroup
Heatmaps	2D intensity maps	Color scales
Tooltips	Tooltip system	Themes & Animations
Export & Media	Media Suite	Snapshot/Video/Data
ROI Selection	Data Region Selection	Rect/Lasso/Polygon
Trading (v2)	All Stage 2 demos	velo-plot/trading
Trading Dashboard	Full multi-pane layout	RSI + MACD + drawings
Trading Session	Business-day time scale	timeScale.calendar
Trading Indicators	addIndicator() presets	RSI, MACD, Stochastic
Drawing Tools	Trendline, Fibonacci	PluginDrawingTools
Offscreen	Smooth Rendering	OffscreenCanvas

Code Snippets

Minimal Example

import { createChart } from 'velo-plot'

const chart = createChart({
  container: document.getElementById('chart'),
})

chart.addSeries({
  id: 'data',
  data: {
    x: new Float32Array([0, 1, 2, 3, 4]),
    y: new Float32Array([0, 1, 4, 9, 16]),
  },
})

React Minimal

import { VeloPlot } from 'velo-plot/react'

<VeloPlot
  series={[{
    id: 'data',
    x: new Float32Array([0, 1, 2, 3, 4]),
    y: new Float32Array([0, 1, 4, 9, 16]),
    color: '#00f2ff',
  }]}
  height="400px"
/>

Live Standalone Examples

These examples are available when running the development server:

• React Showcase
• Performance Test
• Electrochemistry
• Tooltip Showcase