Statistics Panel

The Statistics Panel provides real-time statistical calculations for all visible series within the current view bounds. It's perfect for quick data inspection and quality control.

Requirement

The Statistics Panel is provided by the StatsPlugin. You must load this plugin to see the panel.

import { createChart } from 'velo-plot/scientific';
import { StatsPlugin } from 'velo-plot/full';

const chart = createChart({
  container: document.getElementById('chart'),
  showControls: true,    // Enable controls for full UI
});

// Load the statistics plugin
await chart.use(StatsPlugin({
  collapsed: false,      // Start expanded
  precision: 3           // Number of decimals
}));

Alternatively, if you provide showStatistics: true during createChart, it will be automatically enabled as soon as the StatsPlugin is loaded via chart.use().

const chart = createChart({
  container,
  showStatistics: true   // Queued until plugin is loaded
});

await chart.use(StatsPlugin()); // Panel appears now

Features

The panel calculates statistics for visible series within the current viewport:

Statistic	Description
Min	Minimum Y value in the visible range
Max	Maximum Y value in the visible range
Mean	Arithmetic mean of Y values
Count	Number of data points in the visible range
Area	Numerical integration (trapezoidal rule)

Appearance

The panel appears in the bottom-left corner of the chart as a collapsible overlay:

┌─────────────────────────────────────┐
│ 📊 Statistics                    [-]│
├─────────────────────────────────────┤
│ ▌current                            │
│   Min: -2.45e-5 µA                  │
│   Max: 1.87e-4 µA                   │
│   Mean: 4.32e-5 µA                  │
│   Count: 1,250                      │
│   Area: 0.002156 µA·V               │
├─────────────────────────────────────┤
│ ▌voltage                            │
│   Min: -0.500 V                     │
│   Max: 0.800 V                      │
│   ...                               │
└─────────────────────────────────────┘

Behavior

Viewport-Aware

Statistics are recalculated every time the view changes:

• After zoom operations
• After pan operations
• After auto-scale

Series Visibility

Only visible series are included. Toggle series visibility in the legend to include/exclude them from calculations.

Collapsible

Click the header to expand/collapse the panel. When collapsed, only "📊 Statistics" is shown.

Use Cases

1. Quick Data Validation

After loading data, use the panel to quickly check if values are in expected ranges.

2. Zoom-and-Inspect

Zoom into a region of interest and see statistics for just that region:

chart.zoom({ x: [0.2, 0.4], y: [-1e-4, 2e-4] });
// Statistics panel now shows values only for x=[0.2, 0.4]

3. Peak Area Estimation

The "Area" value gives you a quick numerical integration of the visible data:

Area = ∫ y dx (trapezoidal rule)

4. Multi-Series Comparison

Compare statistics across different series simultaneously.

Styling

The panel inherits theme colors automatically:

// Dark theme - dark semi-transparent background
// Light theme - light semi-transparent background
chart.setTheme('light');

Programmatic Access

You can access statistics programmatically using the analysis utilities:

import { calculateStats, integrate } from 'velo-plot/scientific';

const series = chart.getSeries('my-data');
const data = series.getData();
const bounds = chart.getViewBounds();

const stats = calculateStats(data.x, data.y, bounds.xMin, bounds.xMax);
const area = integrate(data.x, data.y, bounds.xMin, bounds.xMax);

console.log(`Mean: ${stats.mean}, Std: ${stats.std}`);
console.log(`Integrated Area: ${area}`);

API Reference

calculateStats

function calculateStats(
  x: Float32Array | Float64Array,
  y: Float32Array | Float64Array,
  xMin?: number,
  xMax?: number
): {
  min: number;
  max: number;
  mean: number;
  std: number;
  count: number;
}

integrate

function integrate(
  x: Float32Array | Float64Array,
  y: Float32Array | Float64Array,
  xMin?: number,
  xMax?: number
): number

Performance

The statistics panel uses efficient algorithms:

• O(n) for min/max/mean/count
• O(n) for trapezoidal integration
• Calculations only run when the panel is expanded
• Only processes points within the current viewport

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).