Performance

Optimize SciChart Engine for maximum performance with large datasets.

Interactive Demo - 1 Million Points

📊 0 points 🚀 0 FPS

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

Why SciChart Engine is Fast

WebGL Rendering

Unlike canvas-based libraries, SciChart Engine uses WebGL for hardware-accelerated rendering:

• GPU Processing: Data is rendered on the GPU, not CPU
• Parallel Execution: Thousands of points rendered simultaneously
• Shader Optimization: Custom shaders for efficient line/point drawing

Zero-Copy Zoom/Pan

When you zoom or pan:

1. Data stays in GPU memory
2. Only view uniforms are updated
3. No data re-upload required

This is why zooming is instant even with 10M+ points.

TypedArrays

Float32Array provides:

• Contiguous memory layout
• Direct GPU buffer upload
• No JavaScript object overhead

Performance Benchmarks

Points	FPS (typical)	Memory
10,000	60	~1 MB
100,000	60	~8 MB
1,000,000	60	~80 MB
10,000,000	45-60	~800 MB

Results vary by hardware. Tested on M1 MacBook Pro.

Optimization Tips

1. Pre-allocate Arrays

// ✅ Good - allocate once
const n = 1000000
const x = new Float32Array(n)
const y = new Float32Array(n)

for (let i = 0; i < n; i++) {
  x[i] = i
  y[i] = computeValue(i)
}

chart.addSeries({ id: 'data', data: { x, y } })

// ❌ Bad - creates intermediate arrays
const points = data.map(d => ({ x: d.time, y: d.value }))
const x = new Float32Array(points.map(p => p.x))
const y = new Float32Array(points.map(p => p.y))

2. Batch Updates

// ✅ Good - single update with 100 points
const newX = new Float32Array(100)
const newY = new Float32Array(100)
// ... fill arrays
chart.updateSeries('stream', { x: newX, y: newY, append: true })

// ❌ Bad - 100 separate updates
for (let i = 0; i < 100; i++) {
  chart.updateSeries('stream', {
    x: new Float32Array([points[i].x]),
    y: new Float32Array([points[i].y]),
    append: true,
  })
}

3. Use requestAnimationFrame

// ✅ Good - sync with display refresh
function animate() {
  updateData()
  chart.updateSeries('data', newData)
  requestAnimationFrame(animate)
}
requestAnimationFrame(animate)

// ❌ Bad - arbitrary interval
setInterval(() => {
  updateData()
  chart.updateSeries('data', newData)
}, 1)  // Too fast, wastes CPU

4. Limit Visible Data

For very large datasets, consider windowing:

const WINDOW_SIZE = 100000

function updateView(centerIndex) {
  const start = Math.max(0, centerIndex - WINDOW_SIZE / 2)
  const end = Math.min(fullData.length, centerIndex + WINDOW_SIZE / 2)
  
  chart.updateSeries('data', {
    x: fullData.x.slice(start, end),
    y: fullData.y.slice(start, end),
  })
}

5. Downsampling

For datasets too large to display, use LTTB downsampling:

import { downsampleLTTB } from 'scichart-engine'

// Reduce 10M points to 10k for display
const { x: sampledX, y: sampledY } = downsampleLTTB(
  originalX,
  originalY,
  10000
)

chart.addSeries({
  id: 'data',
  data: { x: sampledX, y: sampledY },
})

LTTB preserves visual shape while dramatically reducing point count.

Memory Management

Monitor Memory

chart.on('render', ({ fps }) => {
  if (fps < 30) {
    console.warn('Performance degraded, consider reducing data')
  }
})

Clean Up

// Remove unused series
chart.removeSeries('old-data')

// Destroy chart when done
chart.destroy()

Avoid Memory Leaks

// React
useEffect(() => {
  const chart = createChart({ container })
  
  return () => {
    chart.destroy()  // Clean up on unmount
  }
}, [])

Profiling

FPS Monitoring

chart.on('render', ({ fps, frameTime }) => {
  console.log(`${fps} FPS, ${frameTime.toFixed(2)}ms per frame`)
})

Chrome DevTools

1. Open DevTools → Performance tab
2. Record while interacting with chart
3. Look for:
   • Long "Scripting" times → JavaScript bottleneck
   • Long "Rendering" times → GPU bottleneck
   • Memory growth → potential leak

Hardware Considerations

GPU

• Dedicated GPU provides best performance
• Integrated GPU (Intel/AMD) works well for <1M points
• WebGL 2.0 required

Memory

• Each Float32 value = 4 bytes
• 1M points × 2 arrays × 4 bytes = ~8 MB
• 10M points = ~80 MB

Browser

• Chrome/Edge: Best WebGL performance
• Firefox: Good performance
• Safari: Good, but may have WebGL quirks

Comparison with Other Libraries

Library	10k points	100k points	1M points
SciChart Engine	60 FPS	60 FPS	60 FPS
Chart.js	60 FPS	15 FPS	❌
Plotly	60 FPS	30 FPS	5 FPS
D3.js	60 FPS	20 FPS	❌

❌ = crashes or unusable