JavaScript Chart with Secondary Y Axes

Secondary Y Axes (JavaScript)

Overview

This example demonstrates how to create a high-performance sciChart using JavaScript with two vertically aligned Y axes, one on the left and a secondary on the right. The chart is built using SciChart.js and showcases binding different data series to distinct axes, each with its own custom styling and interactive capabilities.

Technical Implementation

The implementation begins by initializing a SciChartSurface with a WebAssembly (WASM) context to ensure optimal rendering performance. Developers can refer to the Creating a new SciChartSurface and loading Wasm documentation for further details on WASM context initialization. The primary X axis and left Y axis are set up first using NumericAxis, after which a secondary right Y axis is added using axis.axisAlignment = EAxisAlignment.Right. Styling properties like axisTitleStyle, axisTitle, labelStyle and axisBorder, backgroundColor define axis appearance. Data series are bound to their corresponding axes via axis.id using the FastLineRenderableSeries.xAxisId and yAxisId properties, following the guidelines in the Tutorial 08 - Adding Multiple Axis guide. Interactive modifiers, including YAxisDragModifier, XAxisDragModifier, ZoomPanModifier, MouseWheelZoomModifier, and ZoomExtentsModifier, are added to enable dynamic chart interactions.

Features and Capabilities

This example features real-time data visualization with dynamic updates and drag-to-scale capabilities. Both series use custom point markers rendered with the EllipsePointMarker, ensuring that each data point is visually distinctive. The chart also integrates both native and text annotations, providing contextual information directly on the chart. For more on configuring custom point markers, check the PointMarkers API documentation.

Integration and Best Practices

Leveraging JavaScript, this example provides a straightforward integration approach by directly calling the drawExample function and handling resource cleanup with a destructor on the SciChartSurface. The cleanup process follows best practices for memory management, as outlined in resources such as the Proper Disposal of SciChartSurface guide. Additionally, the use of interactive chart modifiers enhances user experience by allowing intuitive dragging, zooming, and panning. Developers are encouraged to follow these patterns to maintain performance and ensure efficient resource management.

For further technical context and advanced customization options, please explore the additional links provided, which cover various aspects from numeric axis configuration to performance optimization in SciChart.js.