Using CursorModifier Crosshairs

Using Cursor Modifier Tooltips - JavaScript

Overview

This example demonstrates how to integrate SciChart.js into a JavaScript application to create high-performance, interactive charts. The implementation utilizes WebAssembly for efficient rendering as explained in the Performance Tips & Tricks documentation. Key features include the configuration of numeric axes, multiple fast line series, and advanced cursor behavior with custom tooltip support.

Technical Implementation

The chart is asynchronously initialized by creating a SciChartSurface along with X and Y axes configured through NumericAxis and NumberRange, ensuring precise label formatting (see The Numeric Axis for more details). Multiple FastLineRenderableSeries are added with corresponding XyDataSeries and EllipsePointMarker to effectively display data. The example adds several interactive chart modifiers including CursorModifier for crosshair behavior, ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier for intuitive zooming and panning. Custom tooltips are implemented by overriding the default behavior using an SVG template, as detailed in Customizing the CursorModifier Tooltip Container Appearance.

Features and Capabilities

This implementation provides dynamic updates with interactive zooming, panning, and detailed tooltips that display a legend for the underlying series. Advanced customization is achieved by dynamically generating SVG annotations for the tooltip, allowing a clear display of series names and formatted data values. Performance optimizations and resource management strategies using WebAssembly are employed to ensure smooth interactions.

Integration and Best Practices

The example follows best practices for asynchronous initialization and resource cleanup. A cleanup function is returned after the chart is created, and calling sciChartSurface.delete() ensures that resources are properly disposed of when the chart is no longer needed, thus preventing memory leaks. Developers can refer to the Getting Started with SciChart JS guide for further understanding of initializing and managing chart resources. Additionally, the axis configuration and tooltip customization patterns leveraged in this example align with the recommended approaches discussed in the SciChart documentation.

By using JavaScript, this example clearly illustrates how to build an interactive, high-performance chart with advanced visual customizations and robust user interaction capabilities.