Using Rollover Modifier Tooltips

Using Rollover Modifier Tooltips with JavaScript

Overview

This example demonstrates how to create an interactive chart using SciChart.js in a pure JavaScript environment. It showcases the creation of a SciChartSurface with customized numeric axes, data series rendered from Fourier series data, and advanced interactivity through custom tooltip behaviors.

Technical Implementation

The chart is initialized by asynchronously creating a SciChartSurface and setting up numeric axes with properties such as growBy, labelFormat, and labelPrecision (see the NumericAxis documentation for more details). Three separate FastLineRenderableSeries are added, each using an EllipsePointMarker to draw data points. Custom tooltip templates and legends are implemented by configuring a RolloverModifier, which overrides the default tooltip behavior as detailed in the RolloverModifier documentation. Additional interactive behaviors are provided with zooming and panning modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier (refer to the ZoomPanModifier documentation for implementation guidance). WebAssembly is leveraged via the wasmContext to enhance performance, with more optimization techniques described in the Performance Tips & Tricks documentation.

Features and Capabilities

This example highlights advanced features including real-time tooltip customization and dynamic legend templates. The custom tooltips display formatted x and y values along with a tailored legend rendered using inline SVG, enhancing data readability. Such capabilities are critical for interactive data analysis and can be further explored in the Adding Tooltips and Legends tutorial.

Integration and Best Practices

The implementation follows best practices in resource management by providing a dedicated destructor that calls sciChartSurface.delete() to properly dispose of the chart instance, as recommended in the Memory Best Practices guide. By integrating Fourier series data with custom point markers and interactivity through various chart modifiers, the example offers a comprehensive solution without relying on any framework-specific hooks or builder APIs. Developers can refer to the SciChart.js User Manual for further insights on extending these techniques.