JavaScript Chart with Vertically Stacked Axes

Vertically Stacked Axes Example with JavaScript

Overview

This example demonstrates how to create a high-performance chart using SciChart.js with JavaScript. It showcases a custom setup where multiple independent Y-axes are vertically stacked to allow overlapping data traces similar to ECG/EEG visualizations. The chart is initialized asynchronously and leverages native JavaScript for a straightforward integration in web applications.

Technical Implementation

The chart is created by calling SciChartSurface.create() asynchronously, ensuring that the WebAssembly context is fully loaded before rendering. A custom axis layout is implemented using the LeftAlignedOuterVerticallyStackedAxisLayoutStrategy as described in the Vertically Stacked Axis Layout documentation. Each data series is associated with its own Y-axis, configured with a specific visible range and border styling. Data for each series is generated dynamically using a sine wave algorithm via the XyDataSeries, which aligns with best practices as shown in the Tutorial on Adding Series and Data. In addition, multiple interactive modifiers such as YAxisDragModifier, XAxisDragModifier, RubberBandXyZoomModifier, and MouseWheelZoomModifier are added to enhance user interactivity.

Features and Capabilities

The example emphasizes several advanced features:

• Multiple Y-Axes: Each data trace is plotted against its own Y-axis, enabling a stacked layout that is ideal for overlapping visualizations.
• High-Performance Rendering: The use of FastLineRenderableSeries ensures smooth rendering of large data sets. More details can be found in the FastLineRenderableSeries API Documentation.
• Interactive Modifiers: Advanced interactivity is provided through drag and zoom modifiers, allowing dynamic exploration of the chart.
• Annotations: A text annotation is incorporated using NativeTextAnnotation to offer contextual information directly on the chart.

Integration and Best Practices

This implementation is a prime example of integrating SciChart.js with JavaScript. Developers can follow the asynchronous initialization pattern and proper lifecycle management evidenced by the cleanup function which calls sciChartSurface.delete(). For more information on JavaScript integration, refer to the Getting Started with SciChart JS guide. Additionally, proper memory management and disposal practices are covered in the Deleting DataSeries Memory documentation. By adopting these techniques, developers can ensure optimal performance and maintainability in their web applications.