SciChart.js

v^2.2.2415

JavaScript Chart Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Drag Axis to Scale or Pan

Demonstrates how to scale or pan the Axis on a JavaScript Chart using SciChart.js, High Performance JavaScript Charts

Demonstrates how to add behaviour to scale, zoom or pan a chart by dragging the X or Y Axis on the chart. Try it out below! Drag an axis to watch the chart re-scale.

Tips!

Try dragging an axis to zoom or pan the axis. Double clicking the chart resets the zoom!

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 Draw Behind Axis

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 JavaScript Generic 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.