Using Series Selection

Chart Series Selection/Hover in JavaScript

Overview

This example demonstrates how to implement interactive series selection and hover events in SciChart.js using JavaScript. Multiple renderable series are added to a chart and enhanced with custom event handlers to provide visual feedback when a series is hovered or selected. Developers can learn more about these capabilities by exploring the Series Selection documentation and the [SeriesSelectionModifier] TypeDoc API(https://www.scichart.com/documentation/js/v5/typedoc/classes/seriesselectionmodifier.html) reference.

Technical Implementation

The chart is initialized by calling SciChartSurface.create() with a WebAssembly context, and NumericAxis components are added to provide dynamic scaling with a customizable NumberRange. A SeriesSelectionModifier is added to the chart and onHoveredChanged and onSelectedChanged event handlers are implemented to adjust the opacity and stroke color of each series. In particular, the example uses GenericAnimation to smoothly transition visual properties when series are hovered, while other series are dimmed to emphasize the active one. Annotations such as TextAnnotation are added to display instructions and, together with a LegendModifier, help provide a legend which adds context to the data.

Features and Capabilities

This example highlights several advanced features of SciChart.js including:

• Interactive Series Selection: Implemented via the SeriesSelectionModifier, enabling both hover and click-based selection events.
• Custom Animations: Smooth transitions for visual feedback are achieved using GenericAnimation, allowing dynamic changes in opacity and stroke color.
• Annotations and Legends: A text annotation provides user guidance while a legend is integrated using the LegendModifier for clear data series labeling.
• Resource Management: The chart instance is properly disposed of using the delete method on the SciChartSurface, following best practices detailed in the Getting Started with SciChart JS guide.

Integration and Best Practices

While this example is implemented using JavaScript, it demonstrates patterns that are easily transferable to frameworks like React, Angular, or Vue. Developers are encouraged to follow efficient performance practices by leveraging the WebAssembly context (wasmContext) for processing large datasets, as showcased in the SciChart.js Performance Demo.

This comprehensive example serves as a practical guide for adding interactivity and advanced visual customizations to SciChart.js charts using plain JavaScript while adhering to best practices for performance optimization and resource management.