name	velo-plot
description	High-performance scientific charting and data analysis using Velo Plot (WebGL).

Velo Plot Skill

This skill allows agents to integrate and manage the Velo Plot, a high-performance WebGL-based charting library for scientific and analytical applications.

Quick Start

To initialize a chart in a DOM element:

import { createChart } from 'velo-plot';

const chart = createChart({
  container: document.getElementById('chart-id'),
  xAxis: { label: 'Time (s)', auto: true },
  yAxis: { label: 'Value', auto: true },
  theme: 'midnight',
  // Layout configuration (optional)
  layout: {
    legend: {
      highlightOnHover: false,   // Default: no color change on hover
      bringToFrontOnHover: true, // Default: bring series to front
    },
  },
});

// Enable cursor with crosshair
chart.enableCursor({
  enabled: true,
  crosshair: true,
  snap: true,
  valueDisplayMode: 'corner',     // 'disabled' | 'floating' | 'corner'
  cornerPosition: 'top-right',    // Where to show values in 'corner' mode
  lineStyle: 'dashed',            // 'solid' | 'dashed' | 'dotted'
});

Core Concepts

WebGL Rendering: Optimized for 10^5+ points.
Series: Data is added as series (line, scatter, boxplot, etc.).
Cursor: Native cursor with crosshair and configurable value display.
Plugins: Extend functionality (analysis, tools, export, ML).
Themes: Midnight, Electrochemistry, Light, Dark.
Layout: Fine-grained control over legend positioning and behavior.

Guidelines for Agents

Memory Management: Always call chart.destroy() when the component unmounts.
Data Performance: Use Float32Array for large datasets.
Plugins: Only load necessary plugins to keep bundles small. Use chart.use(PluginName(config)).
Cursor: Use native enableCursor() for crosshairs and tooltips (not a plugin).
Layout: Configure legend behavior via layout option in createChart().

Cursor Configuration

The native cursor supports three value display modes:

// Floating mode (default) - tooltip follows cursor
chart.enableCursor({ crosshair: true, valueDisplayMode: 'floating' });

// Corner mode - fixed position box
chart.enableCursor({
  crosshair: true,
  valueDisplayMode: 'corner',
  cornerPosition: 'top-right', // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
});

// Disabled mode - crosshair lines only, no values
chart.enableCursor({ crosshair: true, valueDisplayMode: 'disabled' });

Synthesis of Possibilities

High-Performance 2D/3D Rendering: WebGL/WebGPU core handling millions of points.
Rich Series Library: Line, Scatter, Area, Band, Candlestick, BoxPlot, Waterfall, Ternary, Heatmap, Gauges, Sankey.
Real-time Processing: Fast data appending, rolling windows, and streaming plugins.
Scientific Analysis: Peaks, Cycles, FFT, Regression, Smoothing, Filters, Integration, Derivatives.
Interactive Interrogation: Delta measurement, Peak integration, Lasso/Box selection, Crosshairs.
Advanced Export: High-res Snapshots (4K/8K), Video recording, MATLAB/Excel/JSON export.
Native LaTeX: Professional mathematical notation for labels and annotations.
UI Customization: Glassmorphism menus, dynamic themes, responsive layouts.

Comprehensive Guides

Practical Examples

Agent Implementation Checklist

When tasked with adding a chart to a project:

Container: Ensure a <div> with fixed dimensions exists in the DOM.
Initialization: Use createChart.
Cursor: Configure with enableCursor() - choose value display mode.
Layout: Configure legend behavior via layout option as needed.
Plugins: Identify if specialized tools (measurement, analysis) are required.
Data Processing: Convert source data to Float32Array or Float64Array.
Visuals: Set the theme and series styles according to UX requirements.
Cleanup: Verify the destroy() call is wired to the component lifecycle.

Key Defaults (v1.10.4)

Feature	Default Behavior
Legend hover color change	Disabled (`highlightOnHover: false`)
Legend hover bring-to-front	Enabled (`bringToFrontOnHover: true`)
Cursor value display	Floating (`valueDisplayMode: 'floating'`)
Crosshair line style	Dashed (`lineStyle: 'dashed'`)

name	velo-plot
description	High-performance scientific charting and data analysis using Velo Plot (WebGL).