Angular 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};
195Angular Chart Data Point Selection
Overview
This example demonstrates how to interactively select data points on a SciChart.js chart within an Angular application. It utilizes the DataPointSelectionModifier to allow users to click, CTRL+click, or drag-select points, providing immediate visual feedback on selected data. For further details on data point selection, refer to the DataPoint Selection documentation.
Technical Implementation
The chart is initialized asynchronously using an async function that sets up numeric axes and multiple SplineLineRenderableSeries. Each series is enhanced with conditional styling via the DataPointSelectionPaletteProvider and a custom data label provider that only displays labels for selected points, denoted by metadata.isSelected. The implementation subscribes to the selectionChanged event, ensuring that the Angular component state is updated in real time.
Features and Capabilities
This example offers real-time updating of selected data points, which are displayed in an adjacent data table. It includes advanced features such as customizable point markers, dynamic annotations, and an integrated legend, all designed to enhance user interaction. The conditional styling provided by the DataPointSelectionPaletteProvider which is key to differentiating selected points, as detailed in the DataPoint Selection documentation.
Integration and Best Practices
Integrating SciChart.js within an Angular environment is streamlined by embedding the chart initialization into an Angular component. The example demonstrates efficient event handling and state synchronization using Angular's data binding techniques. Developers can benefit from the scichart-angular package for additional guidance on best practices. Moreover, exploring Performance Tips & Tricks can help optimize the performance of applications handling multiple renderable series.
angular Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
Angular Chart Hit-Test API
Demonstrates Hit-Testing a Angular 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 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
Using Custom Tooltips
Demonstrates how to customise the tooltips for Rollover, Cursor and VerticalSlice modifiers in an Angular Chart with SciChart.js