SciChart.js
v^1.3.1523

JavaScript Chart Examples

SciChart.js ships with ~40 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

Zoom and Pan a Realtime JavaScript Chart

Zoom the real-time chart below by dragging on the surface. Then double-click to reset zoom and start automatically scrolling again.

This examples shows how to add zooming and panning behaviour to a realtime JavaScript Chart.

When you use AutoRanging in a SciChart.js chart, the chart will always automatically range to fit the data.{" "} This means that zoom, pan modifiers will not work on the chart. In order to allow both behaviors, this example demonstrates how to use the ZoomState property to determine when to zoom to fit, or when to allow user zooming.

Tips!

Check in the source-code for how we use the SciChartSurface.ZoomState property to determine when to scroll and when to allow user-zooming.

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