JavaScript Chart Data Point Selection

Datapoint 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.