API Reference

SciChart Engine provides a comprehensive API for creating high-performance scientific charts.

Core Modules

Chart Creation

Function	Description
createChart(options)	Create a new chart instance

Series Management

Method	Description
chart.addSeries(options)	Add a new data series
chart.updateSeries(id, data)	Update series data
chart.removeSeries(id)	Remove a series
chart.getSeries(id)	Get a series by ID
chart.getAllSeries()	Get all series

View Control

Method	Description
chart.zoom(options)	Programmatic zoom
chart.pan(deltaX, deltaY)	Programmatic pan
chart.resetZoom()	Reset to auto-scale
chart.autoScale()	Fit view to data
chart.getViewBounds()	Get current view bounds

Interactions

Method	Description
chart.enableCursor(options)	Enable crosshair cursor
chart.disableCursor()	Disable cursor
chart.tooltip	Tooltip system manager

Events

Event	Description
render	Fired after each frame render
zoom	Fired when view bounds change
pan	Fired during panning
resize	Fired when chart resizes

Lifecycle

Method	Description
chart.resize(width?, height?)	Manually resize chart
chart.render()	Force a render
chart.destroy()	Clean up resources
chart.use(plugin)	Load a plugin
chart.getPlugin(name)	Get a plugin instance

Core Plugins

Many high-level features are provided as plugins. Load them using chart.use().

Plugin	Features
PluginTools	Tooltips, Delta Tool, Peak Tool
PluginAnalysis	FFT, Regression, Smoothing
PluginAnnotations	Lines, Shapes, Text
PluginPatternRecognition	Detect chart patterns (Head & Shoulders, etc.)
PluginStreaming	Real-time WebSocket streaming
PluginGpu	WebGPU & GPGPU acceleration
StatsPlugin	Real-time statistics panel
PluginDataTransform	Real-time data transformation pipeline
PluginLoading	Custom loading indicators
PluginROI	Selection tools (Rectangle, Lasso, Polygon)
PluginVirtualization	Render massive datasets (10M+ points)
PluginOffscreen	Rendering in background Workers
PluginExport	Snapshots, Video recording, Data export
DirectionIndicatorPlugin	Real-time trend arrows

Annotations

Method	Description
chart.addAnnotation(annotation)	Add an annotation
chart.removeAnnotation(id)	Remove an annotation
chart.updateAnnotation(id, updates)	Update an annotation
chart.getAnnotation(id)	Get an annotation by ID
chart.getAnnotations()	Get all annotations
chart.clearAnnotations()	Clear all annotations

Annotation Types:

• horizontal-line - Horizontal line with optional label
• vertical-line - Vertical line with optional label
• rectangle - Rectangular region
• band - Horizontal or vertical band/region
• text - Text annotation with customizable style
• arrow - Arrow with head customization

View full Annotations API →

Step Charts

Step charts display data as "stair-step" patterns - ideal for discrete data.

Type	Description
step	Step line chart
step+scatter	Step chart with point markers

Step Modes:

• after - Step after the point (default)
• before - Step before the point
• center - Step at midpoint

View Step Charts documentation →

Data Export

Method	Description
chart.exportCSV(options?)	Export data to CSV format
chart.exportJSON(options?)	Export data to JSON format

// Quick export
const csv = chart.exportCSV();
const json = chart.exportJSON();

// With options
const csv = chart.exportCSV({
  seriesIds: ['current'],
  precision: 4,
  delimiter: '\t'
});

View Data Export documentation →

Error Bars

Visualize uncertainty, variability, or confidence intervals in your data.

Error Data Types:

• yError - Symmetric Y error (±value)
• yErrorPlus / yErrorMinus - Asymmetric Y error
• xError - Symmetric X error (horizontal)
• xErrorPlus / xErrorMinus - Asymmetric X error

Styling Options:

errorBars: {
  color: '#00f2ff',
  width: 1.5,
  capWidth: 8,
  showCaps: true,
  opacity: 0.7,
  direction: 'both'  // 'both' | 'positive' | 'negative'
}

View Error Bars documentation →

Scatter Symbols

Multiple marker shapes for scatter plots, rendered via optimized shaders.

Supported Shapes:

• circle (default), square, diamond
• triangle, triangleDown
• cross, x, star

Usage:

style: {
  symbol: 'star',
  pointSize: 10,
  color: '#ff4d4d'
}

View Scatter Symbols documentation →

Tooltip System

Advanced, high-performance tooltips with multi-series support, scientific notation, and smooth animations.

Tooltip Modes:

• dataPoint - Snap to nearest data point
• crosshair - Multi-series vertical tracking
• heatmap - Cell-specific intensity display

Themes:dark, light, glass (translucent), midnight (blue), neon (vibrant), minimal.

View Tooltip System documentation →

Gauge & Sankey

Nuevos tipos de visualización altamente especializados para KPIs y flujos.

Tipo	Descripción	Documentación
gauge	Diales y medidores de aguja	Gauge Charts
sankey	Diagramas de flujo de Sankey	Sankey Diagrams

Ver todos los tipos de Series →

React API

Export	Description
SciChart	React component
useSciChart	React hook for imperative control

Data Analysis

Function	Description
detectCycles()	Detect cycles in oscillating data
detectPeaks()	Find local maxima/minima
calculateStats()	Basic statistics
movingAverage()	Smooth data
downsampleLTTB()	Reduce point count
validateData()	Check for invalid values

TIP

These functions are available as standalone utilities or via chart.analysis after loading the PluginAnalysis.

Theming

Export	Description
DARK_THEME	Dark theme preset
LIGHT_THEME	Light theme preset
MIDNIGHT_THEME	Midnight blue theme
createTheme()	Create custom theme

Utilities

Feature	Description	Link
Keyboard	Shortcut management	Keyboard API
I18n	Localization & Locales	I18n API
Clipboard	Copy data to system	Clipboard API
Videos	Record chart animations	Video Recorder
Streaming	Real-time data feeds	Streaming API
GPU	Hardware acceleration	GPU & WebGPU

Types

// Core types
type SeriesType = 'line' | 'scatter' | 'both'
type ScaleType = 'linear' | 'log'

interface Bounds {
  xMin: number
  xMax: number
  yMin: number
  yMax: number
}

interface Point {
  x: number
  y: number
}

// Series types
interface SeriesData {
  x: Float32Array | Float64Array
  y: Float32Array | Float64Array
}

interface SeriesStyle {
  color?: string
  width?: number
  pointSize?: number
  smoothing?: number
}

// Chart options
interface ChartOptions {
  container: HTMLElement
  xAxis?: AxisOptions
  yAxis?: AxisOptions
  theme?: string | ChartTheme
  background?: string
  showControls?: boolean
  showLegend?: boolean
}