Uploaded April 2026 | Updated September 2026, 2 weeks ago

---

Build a high-performance JavaScript scatter chart using SciChart.js — featuring dual datasets, custom point markers, smooth animations, and interactive zoom and pan controls.

In this tutorial, you'll learn how to create a multi-series scatter plot in JavaScript using SciChart.js and WebGL. Designed for developers building analytics dashboards, engineering tools, financial platforms, and real-time data applications, SciChart.js delivers fast, scalable rendering with millions of data points at 60 FPS.

What You’ll Learn:
✅ How to create a chart using SciChartSurface
✅ How to configure numeric X and Y axes
✅ How to structure data using XyDataSeries
✅ How to render multiple scatter series on one chart
✅ How to customise point markers for each dataset
✅ How to apply SweepAnimation with staggered delays
✅ How to add zoom, pan, and reset chart interactions

Topics Covered:
- SciChartSurface setup
- NumericAxis configuration
- XyDataSeries creation
- Scatter series rendering
- Circle and triangle point markers
- Multi-series chart configuration
- Animations and chart interactivity

Chapters:
00:00 Intro
00:20 Project overview
00:45 Chart setup
01:55 Data preparation
02:40 First scatter series
03:35 Second scatter series
04:30 Zoom and pan controls

Get Started & Learn More:
Live Demo: scichart.com/demo/javascript/polar-mountain-chart
SciChart GPT: chat.scichart.com
GitHub Examples: github.com/abtsoftware
SciChart Blogs: scichart.com/blog

#SciChart #JavaScriptCharts #ScatterChart #DataVisualization #WebGL #JavaScript #RealTimeCharts #AnalyticsDashboard #ChartLibrary #FrontendDevelopment #SciChartJS #DataEngineering