React Chart Hit-Test API
Demonstrates how to add Hit-Test on click behavior to a chart using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
visualizeHitTest.ts
1import { appTheme } from "../../../theme";
2import { visualiseHitTestPoint } from "./visualizeHitTest";
3
4import {
5 SciChartSurface,
6 NumericAxis,
7 EAxisAlignment,
8 NumberRange,
9 FastLineRenderableSeries,
10 XyDataSeries,
11 EllipsePointMarker,
12 HitTestInfo,
13 DpiHelper,
14 TextAnnotation,
15 EHorizontalAnchorPoint,
16 EVerticalAnchorPoint,
17 ECoordinateMode,
18 EAnnotationLayer,
19 EMultiLineAlignment,
20 ETextAlignment,
21 Thickness,
22 NativeTextAnnotation,
23} from "scichart";
24
25// This method hit-tests the series body
26export const HIT_TEST = "hitTest";
27// This method hit-tests the nearest data-point
28export const HIT_TEST_DATAPOINT = "hitTestDataPoint";
29// This method hit-tests by searching first in X, then Y
30export const HIT_TEST_X_SLICE = "hitTestXSlice";
31
32export const drawExample = async (rootElement: string | HTMLDivElement) => {
33 // Which hit-test method are we using? See below for usage
34 let whichHitTestMethod = HIT_TEST_DATAPOINT;
35
36 // Create a SciChartSurface with theme
37 const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
38 theme: appTheme.SciChartJsTheme,
39 title: [
40 "Click on the chart to demonstrate Hit-Test API",
41 "Change the Hit-Test method above to see the different behaviours",
42 ],
43 titleStyle: {
44 fontSize: 16,
45 placeWithinChart: true,
46 alignment: ETextAlignment.Left,
47 multilineAlignment: EMultiLineAlignment.Left,
48 color: appTheme.ForegroundColor + "C4",
49 padding: Thickness.fromString("13 4 0 9"),
50 },
51 });
52
53 // add an event listener for mouse down. You can access the actual SciChartSurface canvas as
54 // follows
55 sciChartSurface.domCanvas2D.addEventListener("mousedown", (mouseEvent) => {
56 // Translate the point to the series viewrect before hit-testing
57 // Attention!
58 // We need to multiply it by DpiHelper.PIXEL_RATIO
59 // DpiHelper.PIXEL_RATIO is used for High DPI and Retina screen support and also for the browser scaling
60 const mousePointX = mouseEvent.offsetX * DpiHelper.PIXEL_RATIO;
61 const mousePointY = mouseEvent.offsetY * DpiHelper.PIXEL_RATIO;
62 // const translatedPoint = translateFromCanvasToSeriesViewRect(mousePoint, sciChartSurface.seriesViewRect);
63 const HIT_TEST_RADIUS = 10 * DpiHelper.PIXEL_RATIO;
64
65 // call renderableSeries.hitTestProvider.hitTest passing in the mouse point
66 // other parameters determine the type of hit-test operation to perform
67 // There are three hit-test methods which have different outcomes. We let the user choose
68 let hitTestInfo: HitTestInfo;
69 if (whichHitTestMethod === HIT_TEST_DATAPOINT) {
70 // Hit-test the nearest data-point, searching first in X, then Y
71 hitTestInfo = lineSeries.hitTestProvider.hitTestDataPoint(mousePointX, mousePointY, HIT_TEST_RADIUS);
72 }
73 if (whichHitTestMethod === HIT_TEST_X_SLICE) {
74 // Hit-test the nearest data-point in X only (imagine a vertical slice on the chart)
75 hitTestInfo = lineSeries.hitTestProvider.hitTestXSlice(mousePointX, mousePointY, HIT_TEST_RADIUS);
76 }
77 if (whichHitTestMethod === HIT_TEST) {
78 // Hit-test in two-dimensions (slowest method but finds the nearest data-point by distance)
79 hitTestInfo = lineSeries.hitTestProvider.hitTest(mousePointX, mousePointY, HIT_TEST_RADIUS);
80 }
81
82 // Log the result to console. HitTestInfo contains information about the hit-test operation
83 console.log(
84 `${hitTestInfo.seriesName} hit test result (${whichHitTestMethod}):\r\n` +
85 ` MouseCoord=(${mousePointX}, ${mousePointY})\r\n` +
86 ` Hit-Test Coord=(${hitTestInfo.xCoord}, ${hitTestInfo.yCoord})\r\n` +
87 ` IsHit? ${hitTestInfo.isHit}\r\n` +
88 ` Result=(${hitTestInfo.xValue}, ${hitTestInfo.yValue}) `
89 );
90 visualiseHitTestPoint(sciChartSurface, hitTestInfo, whichHitTestMethod, 1000);
91 });
92
93 // Continue chart setup
94 //
95
96 // Create an X,Y Axis. For this example we put y-axis on the left to demonstrate offsetting the mouse-point when hit-testing
97 sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
98 sciChartSurface.yAxes.add(
99 new NumericAxis(wasmContext, {
100 axisAlignment: EAxisAlignment.Left,
101 growBy: new NumberRange(0.1, 0.1),
102 })
103 );
104
105 // Create a Line Series with XyDataSeries and some data
106 const lineSeries = new FastLineRenderableSeries(wasmContext, {
107 strokeThickness: 3,
108 stroke: appTheme.VividSkyBlue,
109 dataSeries: new XyDataSeries(wasmContext, {
110 dataSeriesName: "Line Series",
111 xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
112 yValues: [0, 1, 5, 1, 20, 5, 1, 8, 9, 3],
113 }),
114 pointMarker: new EllipsePointMarker(wasmContext, {
115 stroke: appTheme.VividSkyBlue,
116 fill: appTheme.VividSkyBlue + "33",
117 width: 11,
118 height: 11,
119 }),
120 });
121
122 // Add the line series to the SciChartSurface
123 sciChartSurface.renderableSeries.add(lineSeries);
124
125 const watermarkAnnotation = (text: string = "") => {
126 return new NativeTextAnnotation({
127 text,
128 fontSize: 32,
129 textColor: appTheme.ForegroundColor,
130 x1: 0.5,
131 y1: 0.5,
132 opacity: 0.23,
133 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
134 verticalAnchorPoint: EVerticalAnchorPoint.Center,
135 xCoordinateMode: ECoordinateMode.Relative,
136 yCoordinateMode: ECoordinateMode.Relative,
137 annotationLayer: EAnnotationLayer.BelowChart,
138 });
139 };
140
141 // Add a watermark
142 const theWatermark = watermarkAnnotation("METHOD: " + whichHitTestMethod + "()");
143 sciChartSurface.annotations.add(theWatermark);
144
145 // Allow changing method and updating watermark.
146 const updateHitTestMethod = (hitTestMethod: string) => {
147 console.log("Setting hitTestMethod " + hitTestMethod);
148 whichHitTestMethod = hitTestMethod;
149 theWatermark.text = "METHOD: " + hitTestMethod + "()";
150 };
151
152 return { sciChartSurface, wasmContext, controls: { updateHitTestMethod } };
153};
154Hit 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.
react Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
Using Rollover Modifier Tooltips
Demonstrates adding Tooltips on mouse-move to a React Chart with SciChart.js RolloverModifier
Using CursorModifier Crosshairs
Demonstrates adding a Cursor (Crosshair) to a React Chart with SciChart.js CursorModifier
Using VerticalSliceModifier
Demonstrates adding Tooltips at certain positions to a React Chart with SciChart.js VerticalSliceModifier
Datapoint Metadata Tooltips on React Chart
Demonstrates using MetaData in a React Chart - add custom data to points for display or to drive visual customisation
Using Series Selection
Demonstrates Hit-Testing a React Chart - point and click on the chart and get feedback about what data-points were clicked
React Chart Data Point Selection
Demonstrates the DatapointSelectionModifier, which provides a UI to select one or many data points, and works with DataPointSelectionPaletteProvider to change the appearance of selected points
Using Custom Tooltips
Demonstrates how to customise the tooltips for Rollover, Cursor and VerticalSlice modifiers in a React Chart with SciChart.js