Angular 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 (Angular)
Overview
This example demonstrates how to incorporate hit testing functionality in SciChart.js charts within an Angular application. It allows users to interact with the chart by clicking on it to trigger various hit test methods such as hit-testing the nearest data point (first by X then by Y), testing within a vertical X-slice, or hit-testing the entire series body. The implementation leverages the high-performance capabilities of SciChart.js to deliver responsive, real-time visual feedback. For more details on the hit test API, see the SciChart.js Hit-Test API documentation.
Technical Implementation
The core functionality is implemented in TypeScript where mouse click events are captured on the SciChartSurface canvas. The example calculates the precise hit coordinates by taking into account high DPI support via the DpiHelper class, ensuring accurate mapping of mouse coordinates to the chart’s data space. Depending on the selected hit test method, the appropriate API function (such as series.hitTestProvider.hitTestDataPoint, hitTestXSlice, or hitTest) is invoked to determine the closest data point or series segment. The resulting HitTestInfo is then visualised using temporary scatter series and animated annotations.
Features and Capabilities
The example is designed to handle dynamic updates and offers multiple methods for hit testing, providing real-time visual feedback that highlights whether a mouse-click hit was successful or not. Interactive elements such as toggle buttons allow users to switch between hit test methods on the fly, demonstrating advanced features such as animated annotations and fade-out transitions. These performance optimisations are supported by the chart’s efficient rendering engine as outlined in the Performance Tips & Tricks section of the documentation.
Integration and Best Practices
Integrating SciChart.js within an Angular application, the example follows Angular best practices by handling event subscriptions and state updates in a controlled manner. The use of ScichartAngularComponent as well as Angular services and component state management ensures that changes to the hit test method are properly handled and that resources such as annotations and renderable series are cleaned up after use.
By following these techniques, the example serves as an excellent reference for developers looking to integrate sophisticated chart hit test capabilities in Angular applications using SciChart.js, ensuring a blend of performance, interactivity, and adherence to Angular best practices.
angular Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
Using Rollover Modifier Tooltips
Demonstrates adding Tooltips on mouse-move to a Angular Chart with SciChart.js RolloverModifier
Using CursorModifier Crosshairs
Demonstrates adding a Cursor (Crosshair) to a Angular Chart with SciChart.js CursorModifier
Using VerticalSliceModifier
Demonstrates adding Tooltips at certain positions to a Angular Chart with SciChart.js VerticalSliceModifier
Datapoint Metadata Tooltips on Angular Chart
Demonstrates using MetaData in a Angular Chart - add custom data to points for display or to drive visual customisation
Using Series Selection
Demonstrates Hit-Testing a Angular Chart - point and click on the chart and get feedback about what data-points were clicked
Angular 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 an Angular Chart with SciChart.js