Zoom and Pan with Overview Chart

Overview Modifier Example - JavaScript

Overview

This example demonstrates how to create an advanced interactive chart using SciChart.js with an integrated overview scrollbar. The chart is built entirely with JavaScript and showcases asynchronous initialization, detailed axis configuration, multiple renderable series, rich interactive modifiers, and informative annotations.

Technical Implementation

The chart is initialized asynchronously using the SciChartSurface.create() method, which provides both the WebAssembly context and the chart surface. Two numeric axes are configured: one with a fixed visible range and another that uses auto-ranging with the autoRange and growBy properties as detailed in the NumericAxis documentation. Data is generated via a random walk algorithm and rendered using a FastLineRenderableSeries for line rendering and an XyScatterRenderableSeries for scatter points. Interactive behavior is enabled through the combination of modifiers such as ZoomPanModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, and MouseWheelZoomModifier; these techniques are explained in the Adding Zooming, Panning Behavior guide.

Finally, an Overview scrollbar is added to the chart, using the function sciChartOverview.create() which creates and binds an overview to a parent SciChartSurface, placing it in it's own HTMLDivElement.

Features and Capabilities

The example features advanced performance optimization through efficient rendering with the FastLineRenderableSeries, which is ideal for handling large data sets. It also implements annotations using NativeTextAnnotation in relative coordinate mode to overlay instructional text on the chart. The Overview chart allows scrolling back and forth through the dataset, as described in the Scrollbars with SciChartOverview documentation page.

Integration and Best Practices

This implementation follows best practices for asynchronous initialization and modular development in JavaScript, as recommended in the Getting Started with SciChart JS guide.