JavaScript 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 AUTO_COLOR,
12 TextAnnotation,
13 EHorizontalAnchorPoint,
14 ECoordinateMode,
15 LegendModifier,
16 LineSeriesDataLabelProvider,
17 DataLabelState,
18 ELegendPlacement,
19 EllipsePointMarker,
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: new EllipsePointMarker(wasmContext, {
79 fill: AUTO_COLOR,
80 stroke: AUTO_COLOR,
81 strokeThickness: 3,
82 width: 20,
83 height: 20,
84 }),
85 strokeThickness: 3,
86 // Optional visual feedback for selected points can be provided by the DataPointSelectionPaletteProvider
87 // When dataSeries.metadata[i].isSelected, this still is applied
88 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
89 // Optional: show datalabels but only for selected points
90 dataLabelProvider: getDataLabelProvider(),
91 })
92 );
93
94 sciChartSurface.renderableSeries.add(
95 new SplineLineRenderableSeries(wasmContext, {
96 id: "Series2",
97 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y1Values, dataSeriesName: "Second Series" }),
98 pointMarker: new EllipsePointMarker(wasmContext, {
99 fill: AUTO_COLOR,
100 stroke: AUTO_COLOR,
101 strokeThickness: 3,
102 width: 20,
103 height: 20,
104 }),
105 strokeThickness: 3,
106 // Optional visual feedback for selected points
107 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
108 // Optional: show datalabels but only for selected points
109 dataLabelProvider: getDataLabelProvider(),
110 })
111 );
112
113 sciChartSurface.renderableSeries.add(
114 new SplineLineRenderableSeries(wasmContext, {
115 id: "Series3",
116 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y2Values, dataSeriesName: "Third Series" }),
117 pointMarker: new EllipsePointMarker(wasmContext, {
118 fill: AUTO_COLOR,
119 stroke: AUTO_COLOR,
120 strokeThickness: 3,
121 width: 20,
122 height: 20,
123 }),
124 strokeThickness: 3,
125 // Optional visual feedback for selected points
126 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
127 // Optional: show datalabels but only for selected points
128 dataLabelProvider: getDataLabelProvider(),
129 })
130 );
131
132 sciChartSurface.renderableSeries.add(
133 new SplineLineRenderableSeries(wasmContext, {
134 id: "Series4",
135 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y3Values, dataSeriesName: "Fourth Series" }),
136 pointMarker: new EllipsePointMarker(wasmContext, {
137 fill: AUTO_COLOR,
138 stroke: AUTO_COLOR,
139 strokeThickness: 3,
140 width: 20,
141 height: 20,
142 }),
143 strokeThickness: 3,
144 // Optional visual feedback for selected points
145 paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
146 // Optional: show datalabels but only for selected points
147 dataLabelProvider: getDataLabelProvider(),
148 })
149 );
150
151 // Todo: Show how to programmatically set points. Requires some changes in scichart.js API
152
153 // Add title annotations
154 sciChartSurface.annotations.add(
155 new TextAnnotation({
156 text: "Click & Drag Select points",
157 fontSize: 20,
158 textColor: appTheme.ForegroundColor,
159 x1: 0.5,
160 opacity: 0.77,
161 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
162 xCoordinateMode: ECoordinateMode.Relative,
163 yCoordinateMode: ECoordinateMode.Relative,
164 })
165 );
166
167 sciChartSurface.annotations.add(
168 new TextAnnotation({
169 text: "Try single click, CTRL+CLICK & Drag to select",
170 fontSize: 16,
171 textColor: appTheme.ForegroundColor,
172 x1: 0.5,
173 yCoordShift: 40,
174 opacity: 0.77,
175 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
176 xCoordinateMode: ECoordinateMode.Relative,
177 yCoordinateMode: ECoordinateMode.Relative,
178 })
179 );
180
181 // Add a legend to the chart
182 sciChartSurface.chartModifiers.add(new LegendModifier({ placement: ELegendPlacement.BottomLeft }));
183
184 // Add the DataPointSelectonModifier to the chart.
185 // selectionChanged event / callback has the selected points in the arguments
186 const dataPointSelection = new DataPointSelectionModifier();
187 dataPointSelection.selectionChanged.subscribe((data: DataPointSelectionChangedArgs) => {
188 // When points are selected, set them - we render the selected points to a table below the chart
189 setSelectedPoints(data.selectedDataPoints);
190 });
191 sciChartSurface.chartModifiers.add(dataPointSelection);
192
193 return { wasmContext, sciChartSurface };
194};
195Datapoint Selection – JavaScript
Overview
This example demonstrates how to implement data point selection in SciChart.js Charts using JavaScript. The example creates several spline line series with simulated data and enables interactive selection of data points. It leverages the SciChart.js core components such as axes, renderable series, annotations, and modifiers to provide a rich, interactive charting experience.
Technical Implementation
The chart is set up by creating a SciChartSurface with a WebAssembly context (see Creating a new SciChartSurface and loading Wasm for more details). Two numeric axes are added to the surface and a number of spline line renderable series are created using an XyDataSeries. Each series uses custom point markers styled according to an automatic color scheme. In addition, a custom data label provider built with the LineSeriesDataLabelProvider is implemented to conditionally display labels only for selected points based on metadata. For handling data point selection, the DataPointSelectionModifier is added to the chart. Its event subscription mechanism is used to update a table of selected points via a callback when selection changes occur. The example also makes use of the DataPointSelectionPaletteProvider to customize the stroke and fill of selected data points denoted by metadata.isSelected.
Features and Capabilities
This chart supports interactive selection via click, CTRL+CLICK, and click & drag actions. Selected data points display custom data labels that include the x and y values, and are visually distinguished by a custom palette. The example also includes text annotations (configured with TextAnnotation) to guide the user, and a legend provided by the LegendModifier to give context to the rendered series. Overall, the example illustrates how multiple renderable series can be enhanced with conditional data labels, palette customization, and interactive selection behavior.
Integration and Best Practices
Even though this example is implemented in JavaScript, it demonstrates several best practices applicable across different frameworks. It uses the native event subscription model provided by SciChart.js modifiers (see Common ChartModifiers Features) and leverages the high-performance WebAssembly context for rendering. Developers can use these techniques to efficiently manage real-time interactions and achieve optimal performance when handling multiple series and complex user interactions. Overall, the implementation provides a solid foundation that can be extended or integrated into larger applications.
javascript Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
JavaScript Chart Hit-Test API
Demonstrates Hit-Testing a JavaScript 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 JavaScript Chart with SciChart.js RolloverModifier
Using CursorModifier Crosshairs
Demonstrates adding a Cursor (Crosshair) to a JavaScript Chart with SciChart.js CursorModifier
Using VerticalSliceModifier
Demonstrates adding Tooltips at certain positions to a JavaScript Chart with SciChart.js VerticalSliceModifier
Datapoint Metadata Tooltips on JavaScript Chart
Demonstrates using MetaData in a JavaScript Chart - add custom data to points for display or to drive visual customisation
Using Series Selection
Demonstrates Hit-Testing a JavaScript 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 JavaScript Chart with SciChart.js