SciChart.js

v^2.0.0-beta.2102

JavaScript Chart Examples

SciChart.js ships with ~60 JavaScript Chart Examples which you can browse, play with, view the source code and see related documentation. All of this is possible with the SciChart.js Examples Suite, which ships as part of the SciChart.js SDK

Download the SDK

Vertically Stacked Axes

Demonstrates how to create a JavaScript Chart with Vertically Stacked Y axis using SciChart.js, High Performance JavaScript Charts

Stacked axes allow data to be drawn in different sections of the chart but still overlap. Zoom vertically using the mouse wheel, or by dragging individual axes. Right-click and drag to zoom horizontally. Double click to Reset

Tips!

Make sure data series and annotations are bound to the correct axis.

You can also Horizontally stack top and bottom axes

Documentation Links

Featured Apps

Performance Demos

Load 500 Series x 500 Points Performance Demo Load 1 Million Points Performance Demo Realtime JavaScript Chart Performance Demo Realtime Ghosted Traces

Scientific Charts

Audio Analyzer Demo LiDAR 3D Point Cloud of Geospatial Data Tenor Curves Demo

Medical Charts

JavaScript Vital Signs ECG/EKG Medical Demo

2D Charts

Chart Annotations

JavaScript Chart Annotations JavaScript Chart Editable Annotations Trading Buy Sell Marker Annotations JavaScript Chart Drag Horizontal Threshold

Create Stock Charts

JavaScript Multi-Pane Stock Charts JavaScript Realtime Ticking Stock Charts

Chart Legends

Chart Legends API

Chart Axis APIs

Multiple X Axes Secondary Y Axes Vertical Charts Central Axes Vertically Stacked Axes Logarithmic Axis Example

Axis Label Customization

Multi-line and Rotated Text labels Image labels Rotated Labels and Alignment

Styling and Theming

Using Theme Manager Create a Custom Theme Styling a JavaScript Chart in Code Coloring Series per-point using the PaletteProvider JavaScript Point-Markers Chart Dashed Line Styling Background Image with Transparency

Tooltips and Hit-Test

Hit-Test API Using Rollover Modifier Tooltips Using CursorModifier Crosshairs Using Series Selection Data Point Selection PointMetadata API

Zoom and Pan a Chart

Drag Axis to Scale or Pan Zoom and Pan a Realtime JavaScript Chart Zoom and Pan with multiple Chart Modifiers Zoom and Pan with Overview Chart

Transforming Data with Filters

Realtime Percentage Change using Filter Trendline, Moving Average and Ratio Filters Custom Filters

Animation API

JavaScript Data Animation JavaScript Style Animation JavaScript Startup Animation

3D Charts

JavaScript 3D Chart Types

JavaScript 3D Bubble Chart JavaScript Surface Mesh 3D Chart

Quick Links

Home WPF Charts WPF 3D Charts iOS & macOS Charts Android Charts JavaScript Charts Pricing News NEW! SciChart Blog About Us EULA Sitemap

Useful Links

Download FREE Trials Installing and Uninstalling SciChart WPF Testimonials & Reviews Community & Support WPF Chart Examples iOS & macOS Chart Examples Android Chart Examples JavaScript Chart Examples

Contact us

Not sure where to start? Contact us, we are happy to help!

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.