Examples
Interactive examples demonstrating SciChart Engine 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.
Scroll to zoom • Drag to pan • Right-drag for box zoom
Real-time Streaming
Continuous data streaming with varying waveforms.
Scroll to zoom • Drag to pan • Right-drag for box zoom
Cyclic Voltammetry
Real-time CV simulation with stable X-axis during streaming.
✨ Notice: X-axis (Potential) remains stable during streaming • Y-axis (Current) auto-scales smoothly
Large Datasets
1 million points rendered at 60 FPS.
Scroll to zoom • Drag to pan • High performance 1M points
Multiple Series
Multiple data series with different colors.
Scroll to zoom • Drag to pan • Multiple series support
Curve Fitting
Automatic trend lines and regression analysis (Linear, Polynomial, etc.).
Scroll to zoom • Drag to pan • Linear and Polynomial Regression
Peak Analysis
Baseline correction and area integration for scientific signals.
Scroll to zoom • Drag to pan • Right-drag for box zoom
Bar Charts
Categorical and discrete data visualization with automatic layout.
Scroll to zoom • Drag to pan • Bar charts
Heatmaps
High-performance 2D intensity maps with customizable color scales.
Scroll to zoom • Drag to pan • Heatmap with bilinear interpolation
Tooltip System
Professional tooltips with themes, animations, and scientific notation.
Hover to see tooltips • Scroll to zoom • Drag to pan
ROI Tools
Interactive tools for selecting and analyzing specific data regions.
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 |
| 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 |
| 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 |
| Offscreen | Smooth Rendering | OffscreenCanvas |
Code Snippets
Minimal Example
import { createChart } from 'scichart-engine'
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 { SciChart } from 'scichart-engine/react'
<SciChart
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: