How to Move a DataPoint on Line Series by Dragging a Point?

Hey,
I’m working on a feature where users can edit DataPoint position directly on a chart by dragging them with the mouse, and I would like to ask for guidance, best practices, or existing examples. I see one example for SciChart WPF but couldn’t apply that to JS because many things differ between WPF and JS.

Goal
Allow users to change the point positions of a LineSeries by dragging individual points on the chart.

Given
An FastLineRenderableSeries (XyDataSeries) with EllipsePointMarker.

When
The user clicks and holds the left mouse button on a point (EllipsePointMarker)

Then
The selected point changes its appearance (e.g., bordered or highlighted) and it is possible to move the point to change the position of it.

On Mouse Release
The point position is updated
Line and point styling return to their default state

Version

4.0.897

JavaScript DataPointSelectionModifier scichart2d React Drag&Drop

Marvin Jaworski asked 4 months ago
last edited 4 months ago

You must login to post comments

Answers (1)

Hi Marvin,

Thank you for your question.
We have showcased the datapoint drag feature in the following JS demo:
Rich Interactions Showcase _ React Charts _ SciChart.js

The dragging feature is being held by the custom “PointDragModifier”. You can find its source code at our GitHub repository at the following link:
SciChart.JS.Examples_Examples_src_components_Examples_FeaturedApps_ShowCases_HeatmapInteractions_PointDragModifier.ts at master · ABTSoftware_SciChart.JS.Examples · GitHub

You can try it out with the “Input drivers” chart of the demo mentioned above
enter image description here