How to drag and drop a data point on a Flutter Cartesian Chart?

To programmatically add, remove, or update the data point, we can use ChartSeriesController. Additionally, we can utilize ChartSeriesController and touch callbacks to programmatically drag and drop a data point. The following steps explain the process in detail.

In this article we have described data point dragging by using the onChartTouchInteractionUp and onChartTouchInteractionMove callbacks. When a point in the chart is long-pressed, the index of the long-pressed point is stored in the ‘pointIndex’ variable using the onPointLongPress callback. The pixelToPoint method in the ‘_chartSeriesController’ is then employed to convert the pixel position of the touch event to a data point on the chart. Subsequently, the original data point at the ‘pointIndex’ is removed from the chartData list, and a new ChartData instance representing the updated position of the dragged point is inserted at the same index. Finally, the updateDataSource method in the _chartSeriesController is called to update the chart with the modified data.

The following steps explains how to update the data point position using drag and drop functionality.

Step 1: Initialize the list chartData which stores the data source. Then create the SfCartesianChart widget with the LineSeries and assign the chartData to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively.

 late final List<ChartData> chartData = <ChartData>[
   ChartData(1, 24),
   ChartData(2, 20),
   ChartData(3, 23),
   ChartData(4, 57),
   ChartData(5, 30),
   ChartData(6, 41),
 ];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: <Widget>[
         Expanded(
           child: SfCartesianChart(             
             series: <CartesianSeries<ChartData, num>>[
               LineSeries<ChartData, num>(                  
                 dataSource: chartData,                 
                 xValueMapper: (ChartData data, _) => data.x,
                 yValueMapper: (ChartData data, _) => data.y,
               ),
             ],
           ),
         ),
       ],
     ),
   );
 }
}

class ChartData {
 ChartData(this.x, this.y);
 final num x;
 final double? y;
}

Step 2: Declare an integer field ‘pointIndex’ to hold the index of the long-pressed point. Then declare the onPointLongPress callback in the SfCartesianChart to capture the index of the long-pressed point and assign the long-pressed point index value to the ‘pointIndex’ variable.

 int? pointIndex;
   
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: <Widget>[
         Expanded(
           child: SfCartesianChart(             
             series: <CartesianSeries<ChartData, num>>[
               LineSeries<ChartData, num>(
                 onPointLongPress: (ChartPointDetails details) {
                   pointIndex = details.pointIndex;
                 },                 

Step 3: Declare an Offset field ‘position’ to store the touch event position. Then declare the onChartTouchInteractionMove and onChartTouchInteractionUp callbacks to handle touch events.

late Offset position;
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: <Widget>[
         Expanded(
           child: SfCartesianChart(
             onChartTouchInteractionMove: (ChartTouchInteractionArgs args) {               
             },
             onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {              
             },
             series: <CartesianSeries<ChartData, num>>[
             .....

Step 4: Declare a ChartSeriesController and onRendererCreated callback to convert the touch event position to a data point using _chartSeriesController!.pixelToPoint(args.position) in onChartTouchInteractionMove and onChartTouchInteractionUp callbacks.

Then update the chart data by removing the original data point and inserting the updated data point at the specified index in onChartTouchInteractionMove and onChartTouchInteractionUp callbacks.

Finally, call the updateDataSource method of ChartSeriesController to reflect the changes on the chart.

 ChartSeriesController? _chartSeriesController;  
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: <Widget>[
         Expanded(
           child: SfCartesianChart(             
             onChartTouchInteractionMove: (ChartTouchInteractionArgs args) {
               if (pointIndex != null) {
                 CartesianChartPoint dragPoint =
                     _chartSeriesController!.pixelToPoint(args.position);
                 chartData.removeAt(pointIndex!);

                 chartData.insert(chartData.length - 1,
                     ChartData(dragPoint.x, dragPoint.y as double?));

                 _chartSeriesController!
                     .updateDataSource(updatedDataIndex: pointIndex!);
               }
             },
             onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {
               if (pointIndex != null) {
                 CartesianChartPoint dragPoint =
                     _chartSeriesController!.pixelToPoint(args.position);
                 chartData.removeAt(pointIndex!);

                 chartData.insert(chartData.length - 1,
                     ChartData(dragPoint.x, dragPoint.y as double?));

                 _chartSeriesController!
                     .updateDataSource(updatedDataIndex: pointIndex!);
               }
             },
             series: <CartesianSeries<ChartData, num>>[
               LineSeries<ChartData, num>(
                 onPointLongPress: (ChartPointDetails details) {
                   pointIndex = details.pointIndex;
                 },
                 dataSource: chartData,
                 onRendererCreated: (ChartSeriesController controller) {
                   _chartSeriesController = controller;
                 },

Now, the data point position is updated using the drag and drop functionality that has been implemented as shown below.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to implement data point dragging on a Flutter Cartesian Chart

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our
Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the
License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our
support forums, Direct-Trac, or feedback portal. We are always happy to assist you!