React Chart Hit-Test API

Hit Test API (React)

Overview

This example demonstrates the implementation of hit test functionality in a SciChart.js chart within a React application. It allows users to interact with the chart by clicking on it and switching between different hit-test methods, such as hit-testing the nearest data point, using an x-slice, or testing the series body.

Technical Implementation

The example uses the <SciChartReact/> component from SciChart-React to initialize a SciChartSurface and efficiently render high-performance charts. The hit-test logic is implemented through a mousedown event listener attached to the SciChartSurface canvas, which process mouse click events. Depending on the selected mode, methods like series.hitTestProvider.hitTestDataPoint, hitTestXSlice, or hitTest are invoked. The resulting HitTestInfo is then visualised using temporary scatter series and animated annotations. This operation utilizes key components such as the DpiHelper for DPI converstion support, as described in the SciChart.js Hit-Test API documentation and DpiHelper documentation.

Features and Capabilities

The example offers real-time updates and visual feedback based on the hit-test results. It dynamically renders annotations and animated scatter points to indicate whether a hit was successful or not. Furthermore, the integration of Material-UI ToggleButtonGroup enables users to switch between different hit testing methods, ensuring the chart remains interactive and responsive. This advanced handling is complemented by animated transitions, demonstrating effective use of the GenericAnimation and FadeAnimation features available in SciChart.js.

Integration and Best Practices

The React integration adheres to best practices by using hooks such as useState and useRef for state management and control updates in the chart component. This helps maintain efficient cleanup and memory management as new annotations and renderable series are dynamically added and removed. Developers interested in best practices for integrating SciChart.js with React can refer to resources like the React Charts with SciChart.js: Introducing "SciChart React" post and Creating a SciChart React Component from the Ground Up.