React Chart Data Point Selection
Demonstrates how to Select Data Points on a chart using SciChart.js, High Performance JavaScript Charts
Selected Points
drawExample.ts
index.tsx
containerSizeHooks.ts
theme.ts
1import {
2 SciChartSurface,
3 NumericAxis,
4 NumberRange,
5 XyDataSeries,
6 DataPointSelectionModifier,
7 DataPointSelectionChangedArgs,
8 DataPointInfo,
9 DataPointSelectionPaletteProvider,
10 SplineLineRenderableSeries,
11 EPointMarkerType,
12 AUTO_COLOR,
13 TextAnnotation,
14 EHorizontalAnchorPoint,
15 ECoordinateMode,
16 LegendModifier,
17 LineSeriesDataLabelProvider,
18 DataLabelState,
19 ELegendPlacement,
20} from "scichart";
21import { appTheme } from "../../../theme";
22
23// Generate some data for the example
24const dataSize = 30;
25const xValues: number[] = [];
26const yValues: number[] = [];
27const y1Values: number[] = [];
28const y2Values: number[] = [];
29const y3Values: number[] = [];
30const y4Values: number[] = [];
31for (let i = 0; i < dataSize; i++) {
32 xValues.push(i);
33 y4Values.push(Math.random());
34 y3Values.push(Math.random() + 1);
35 y2Values.push(Math.random() + 1.8);
36 y1Values.push(Math.random() + 2.5);
37 yValues.push(Math.random() + 3.6);
38}
39
40export const drawExample = async (
41 rootElement: string | HTMLDivElement,
42 setSelectedPoints: (selectedPoints: DataPointInfo[]) => void
43) => {
44 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
45 theme: appTheme.SciChartJsTheme,
46 });
47
48 sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
49 sciChartSurface.yAxes.add(
50 new NumericAxis(wasmContext, {
51 growBy: new NumberRange(0.1, 0.1),
52 })
53 );
54
55 // Stroke/fill for selected points
56 const stroke = appTheme.ForegroundColor;
57 const fill: string = appTheme.PaleSkyBlue + "77";
58
59 // Optional: show datalabels but only for selected points
60 const getDataLabelProvider = () => {
61 const dataLabelProvider = new LineSeriesDataLabelProvider();
62 dataLabelProvider.style = { fontFamily: "Arial", fontSize: 13 };
63 dataLabelProvider.color = appTheme.ForegroundColor;
64 dataLabelProvider.getText = (state: DataLabelState) => {
65 return state.getMetaData()?.isSelected
66 ? `x,y [${state.xValues[state.index].toFixed(1)}, ` +
67 `${state.yValues[state.index].toFixed(1)}] selected`
68 : "";
69 };
70 return dataLabelProvider;
71 };
72
73 // Add some series onto the chart for selection
74 sciChartSurface.renderableSeries.add(
75 new SplineLineRenderableSeries(wasmContext, {
76 id: "Series1",
77 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "First Series" }),
78 pointMarker: {
79 type: EPointMarkerType.Ellipse,
80 options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
81 },
82 strokeThickness: 3,
83 // Optional visual feedback for selected points can be provided by the DataPointSelectionPaletteProvider
84 // When dataSeries.metadata[i].isSelected, this still is applied
85 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
86 // Optional: show datalabels but only for selected points
87 dataLabelProvider: getDataLabelProvider(),
88 })
89 );
90
91 sciChartSurface.renderableSeries.add(
92 new SplineLineRenderableSeries(wasmContext, {
93 id: "Series2",
94 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y1Values, dataSeriesName: "Second Series" }),
95 pointMarker: {
96 type: EPointMarkerType.Ellipse,
97 options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
98 },
99 strokeThickness: 3,
100 // Optional visual feedback for selected points
101 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
102 // Optional: show datalabels but only for selected points
103 dataLabelProvider: getDataLabelProvider(),
104 })
105 );
106
107 sciChartSurface.renderableSeries.add(
108 new SplineLineRenderableSeries(wasmContext, {
109 id: "Series3",
110 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y2Values, dataSeriesName: "Third Series" }),
111 pointMarker: {
112 type: EPointMarkerType.Ellipse,
113 options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
114 },
115 strokeThickness: 3,
116 // Optional visual feedback for selected points
117 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
118 // Optional: show datalabels but only for selected points
119 dataLabelProvider: getDataLabelProvider(),
120 })
121 );
122
123 sciChartSurface.renderableSeries.add(
124 new SplineLineRenderableSeries(wasmContext, {
125 id: "Series4",
126 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y3Values, dataSeriesName: "Fourth Series" }),
127 pointMarker: {
128 type: EPointMarkerType.Ellipse,
129 options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
130 },
131 strokeThickness: 3,
132 // Optional visual feedback for selected points
133 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
134 // Optional: show datalabels but only for selected points
135 dataLabelProvider: getDataLabelProvider(),
136 })
137 );
138
139 // Todo: Show how to programmatically set points. Requires some changes in scichart.js API
140
141 // Add title annotations
142 sciChartSurface.annotations.add(
143 new TextAnnotation({
144 text: "Click & Drag Select points",
145 fontSize: 20,
146 textColor: appTheme.ForegroundColor,
147 x1: 0.5,
148 opacity: 0.77,
149 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
150 xCoordinateMode: ECoordinateMode.Relative,
151 yCoordinateMode: ECoordinateMode.Relative,
152 })
153 );
154
155 sciChartSurface.annotations.add(
156 new TextAnnotation({
157 text: "Try single click, CTRL+CLICK & Drag to select",
158 fontSize: 16,
159 textColor: appTheme.ForegroundColor,
160 x1: 0.5,
161 yCoordShift: 40,
162 opacity: 0.77,
163 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
164 xCoordinateMode: ECoordinateMode.Relative,
165 yCoordinateMode: ECoordinateMode.Relative,
166 })
167 );
168
169 // Add a legend to the chart
170 sciChartSurface.chartModifiers.add(new LegendModifier({ placement: ELegendPlacement.BottomLeft }));
171
172 // Add the DataPointSelectonModifier to the chart.
173 // selectionChanged event / callback has the selected points in the arguments
174 const dataPointSelection = new DataPointSelectionModifier();
175 dataPointSelection.selectionChanged.subscribe((data: DataPointSelectionChangedArgs) => {
176 // When points are selected, set them - we render the selected points to a table below the chart
177 setSelectedPoints(data.selectedDataPoints);
178 });
179 sciChartSurface.chartModifiers.add(dataPointSelection);
180
181 return { wasmContext, sciChartSurface };
182};
183React Chart Data Point Selection
Overview
This example demonstrates a React implementation of a high performance SciChart.js chart that enables interactive data point selection. The chart renders multiple spline line series with customizable point markers and annotations. Users can select individual or multiple data points and see real-time updates reflected in a separate list rendered alongside the chart. For futher details please see the DataPoint Selection Documentation.
Technical Implementation
The chart is initialized using the <SciChartReact/> component, which is integrated into the React framework via an initChart callback. This callback, defined in the drawExample.ts file, sets up numeric axes, multiple SplineLineRenderableSeries, and customizes data point appearance using the DataPointSelectionPaletteProvider. To capture user interactions, the example adds a DataPointSelectionModifier to the chart that triggers a selectionChanged event. This event is then synchronized with React state using the useState hook, ensuring that selected points are displayed timely. Developers can learn more about integrating SciChart.js with React in the Creating a SciChart React Component from the Ground Up guide as well as the React Charts with SciChart.js: Introducing “SciChart React” article.
Features and Capabilities
The core features of this example include interactive data point selection, customized palette styling for selected data points (denoted by metadata.isSelected), and dynamic annotations providing immediate feedback. The use of advanced series components like SplineLineRenderableSeries and point marker customization through EPointMarkerType enhances the chart's visual interactivity. For additional technical insights, the React Chart Data Point Selection - SciChart.js Demo offers a live example, and the DataPointSelectionModifier Documentation provides detailed API guidance.
Integration and Best Practices
Efficient React integration is achieved through the use of hooks such as useState and useRef, ensuring responsive layouts and optimal state management. The example demonstrates how to synchronize chart events with React state updates, enabling seamless user interactions and real-time data displays. This approach aligns with best practices for creating high-performance, interactive charts in React, as discussed in the React Charts with SciChart.js: Introducing “SciChart React” article. Moreover, the example highlights how to effectively manage component responsiveness and event handling, ensuring the chart adapts cleanly to various display sizes.
react Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
React Chart Hit-Test API
Demonstrates Hit-Testing a React Chart - point and click on the chart and get feedback about what data-points were clicked
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
Using Custom Tooltips
Demonstrates how to customise the tooltips for Rollover, Cursor and VerticalSlice modifiers in a React Chart with SciChart.js