Feature: Add draggable spots functionality for LineChart

CHANGELOG.md

@@ -2,6 +2,7 @@
 * **BUGFIX** (by @Anas35) Fix Tooltip not displaying when value from BackgroundBarChartRodData is less than zero. #1345.
 * **BUGFIX** (by @imaNNeo) Fix Negative BarChartRodStackItem are not drawn correctly bug, #1347
 * **BUGFIX** (by @imaNNeo) Fix bar_chart_helper minY calculation bug, #1388
+* **FEATURE** (by @G33kFreak) Add drag spots feature for LineChart, [#1420](https://github.com/imaNNeo/fl_chart/issues/1420)
 
 ## 0.63.0
 * **BUGFIX** (by @imaNNeo) Fix PieChart crash on web-renderer html by ignoring `sectionsSpace` when `Path.combine()` does not work (it's flutter engine [issue](https://github.com/flutter/flutter/issues/44572)), #955

example/lib/presentation/samples/chart_samples.dart

@@ -11,6 +11,7 @@ import 'chart_sample.dart';
 import 'line/line_chart_sample1.dart';
 import 'line/line_chart_sample10.dart';
 import 'line/line_chart_sample11.dart';
+import 'line/line_chart_sample12.dart';
 import 'line/line_chart_sample2.dart';
 import 'line/line_chart_sample3.dart';
 import 'line/line_chart_sample4.dart';
@@ -40,6 +41,7 @@ class ChartSamples {
       LineChartSample(9, (context) => LineChartSample9()),
       LineChartSample(10, (context) => const LineChartSample10()),
       LineChartSample(11, (context) => const LineChartSample11()),
+      LineChartSample(12, (context) => const LineChartSample12()),
     ],
     ChartType.bar: [
       BarChartSample(1, (context) => BarChartSample1()),

example/lib/presentation/samples/line/line_chart_sample12.dart

@@ -0,0 +1,132 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:fl_chart_app/presentation/resources/app_colors.dart';
+import 'package:flutter/material.dart';
+
+class LineChartSample12 extends StatefulWidget {
+  const LineChartSample12({super.key});
+
+  @override
+  State<LineChartSample12> createState() => _LineChartSample12State();
+}
+
+class _LineChartSample12State extends State<LineChartSample12> {
+  List<FlSpot> get spots1 => [
+        const FlSpot(1, 3),
+        const FlSpot(2, 2),
+        const FlSpot(4, 5),
+        const FlSpot(6, 4),
+      ];
+  List<FlSpot> get spots2 => [
+        const FlSpot(1, 1),
+        const FlSpot(2, 4),
+        const FlSpot(3, 6),
+        const FlSpot(5, 3),
+      ];
+
+  UpdatedDragSpotsData? _lastUpdate;
+
+  void _onUpdated(UpdatedDragSpotsData newUpdate) {
+    setState(() {
+      _lastUpdate = newUpdate;
+    });
+  }
+
+  String get _formattedLastSpotValue {
+    if (_lastUpdate == null) {
+      return 'Updated spot: None';
+    }
+
+    final flSpot = _lastUpdate!.newSpots[_lastUpdate!.updatedSpotIndex];
+
+    return 'new X: ${flSpot.x.toStringAsFixed(2)}, new Y: ${flSpot.y.toStringAsFixed(2)}';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const SizedBox(height: 12),
+        Text(
+          'Last updated bar index: ${_lastUpdate?.updatedBarIndex ?? 'none'}',
+          style: const TextStyle(
+            color: AppColors.mainTextColor2,
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        const SizedBox(height: 12),
+        Text(
+          'Last updated spot index: ${_lastUpdate?.updatedSpotIndex ?? 'none'}',
+          style: const TextStyle(
+            color: AppColors.mainTextColor2,
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        const SizedBox(height: 12),
+        Text(
+          _formattedLastSpotValue,
+          style: const TextStyle(
+            color: AppColors.mainTextColor2,
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        AspectRatio(
+          aspectRatio: 1,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: 24.0,
+              vertical: 10,
+            ),
+            child: LayoutBuilder(builder: (context, constraints) {
+              return LineChart(
+                LineChartData(
+                  minY: 0,
+                  minX: 0,
+                  maxX: 8,
+                  maxY: 8,
+                  lineTouchData: LineTouchData(
+                    enabled: true,
+                    handleBuiltInTouches: true,
+                    dragSpotUpdateFinishedCallback: _onUpdated,
+                    getTouchedSpotIndicator:
+                        (LineChartBarData barData, List<int> spotIndexes) {
+                      return spotIndexes.map((index) {}).toList();
+                    },
+                    touchTooltipData: LineTouchTooltipData(
+                      tooltipBgColor: Colors.transparent,
+                      getTooltipItems: (List<LineBarSpot> lineBarsSpot) {
+                        return lineBarsSpot.map((lineBarSpot) {}).toList();
+                      },
+                    ),
+                  ),
+                  lineBarsData: [
+                    LineChartBarData(
+                      spots: spots1,
+                      isCurved: true,
+                      isDraggable: true,
+                    ),
+                    LineChartBarData(
+                      spots: spots2,
+                      isCurved: true,
+                      isDraggable: false,
+                      color: Colors.red,
+                    ),
+                  ],
+                  gridData: const FlGridData(show: false),
+                  borderData: FlBorderData(
+                    show: true,
+                    border: Border.all(
+                      color: AppColors.borderColor,
+                    ),
+                  ),
+                ),
+              );
+            }),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/src/chart/base/axis_chart/axis_chart_painter.dart

@@ -410,6 +410,25 @@ abstract class AxisChartPainter<D extends AxisChartData>
     return viewSize.height - (((spotY - data.minY) / deltaY) * viewSize.height);
   }
 
+  /// Function converts pixelX and pixelY to the [FlSpot],
+  /// reversed logic of [getPixelY] and [getPixelX]
+  FlSpot getTouchedCoordinates(
+    double pixelX,
+    double pixelY,
+    Size viewSize,
+    PaintHolder<D> holder,
+  ) {
+    final data = holder.data;
+    final deltaY = data.maxY - data.minY;
+    final deltaX = data.maxX - data.minX;
+
+    final x = ((pixelX * deltaX) / viewSize.width) + data.minX;
+    final y =
+        ((viewSize.height - pixelY) * deltaY) / viewSize.height + data.minY;
+
+    return FlSpot(x, y);
+  }
+
   /// With this function we can get horizontal
   /// position for the tooltip.
   double getTooltipLeft(

lib/src/chart/line_chart/line_chart.dart

@@ -2,6 +2,7 @@ import 'package:fl_chart/fl_chart.dart';
 import 'package:fl_chart/src/chart/base/axis_chart/axis_chart_scaffold_widget.dart';
 import 'package:fl_chart/src/chart/line_chart/line_chart_renderer.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 /// Renders a line chart as a widget, using provided [LineChartData].
@@ -40,10 +41,42 @@ class _LineChartState extends AnimatedWidgetBaseState<LineChart> {
   /// but we need to keep the provided callback to notify it too.
   BaseTouchCallback<LineTouchResponse>? _providedTouchCallback;
 
+  DragSpotUpdateFinishedCallback? _dragSpotUpdatedCallback;
+
   final List<ShowingTooltipIndicators> _showingTouchedTooltips = [];
 
   final Map<int, List<int>> _showingTouchedIndicators = {};
 
+  List<LineChartBarData> _lineBarsData = [];
+
+  /// Keeps index of bar and spot that currently is being dragging
+  (int barIndex, int spotIndex)? _draggingSpotIndexes;
+
+  bool get _isAnyDraggable =>
+      _lineBarsData.indexWhere((lineBarData) => lineBarData.isDraggable) != -1;
+
+  @override
+  void initState() {
+    _lineBarsData = List.from(
+      widget.data.lineBarsData
+          .map((lineBarData) => lineBarData.copyWith())
+          .toList(),
+    );
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant LineChart oldWidget) {
+    if (!listEquals(oldWidget.data.lineBarsData, widget.data.lineBarsData)) {
+      _lineBarsData = List.from(
+        widget.data.lineBarsData
+            .map((lineBarData) => lineBarData.copyWith())
+            .toList(),
+      );
+    }
+    super.didUpdateWidget(oldWidget);
+  }
+
   @override
   Widget build(BuildContext context) {
     final showingData = _getData();
@@ -79,11 +112,16 @@ class _LineChartState extends AnimatedWidgetBaseState<LineChart> {
     final lineTouchData = widget.data.lineTouchData;
     if (lineTouchData.enabled && lineTouchData.handleBuiltInTouches) {
       _providedTouchCallback = lineTouchData.touchCallback;
+      _dragSpotUpdatedCallback = lineTouchData.dragSpotUpdateFinishedCallback;
       return widget.data.copyWith(
-        lineTouchData: widget.data.lineTouchData
-            .copyWith(touchCallback: _handleBuiltInTouch),
+        lineBarsData: _lineBarsData,
+        lineTouchData: widget.data.lineTouchData.copyWith(
+          touchCallback: _handleBuiltInTouch,
+          distanceCalculator: _isAnyDraggable ? vectorDistanceCalculator : null,
+        ),
       );
     }
+
     return widget.data;
   }
 
@@ -94,8 +132,34 @@ class _LineChartState extends AnimatedWidgetBaseState<LineChart> {
     if (!mounted) {
       return;
     }
-    _providedTouchCallback?.call(event, touchResponse);
 
+    // Cancel dragging
+    if (event is FlPanEndEvent || event is FlLongPressEnd) {
+      if (_draggingSpotIndexes != null) {
+        final (barIndex, spotIndex) = _draggingSpotIndexes!;
+        _dragSpotUpdatedCallback?.call(
+          UpdatedDragSpotsData(
+            barIndex,
+            spotIndex,
+            _lineBarsData[barIndex].spots,
+          ),
+        );
+      }
+      setState(() {
+        _draggingSpotIndexes = null;
+      });
+    }
+
+    // if indexes of dragging spot exist, changes it's position
+    if (_draggingSpotIndexes != null) {
+      final (barIndex, spotIndex) = _draggingSpotIndexes!;
+      setState(() {
+        _lineBarsData[barIndex].spots[spotIndex] =
+            touchResponse!.touchedAxesPoint!;
+      });
+    }
+
+    _providedTouchCallback?.call(event, touchResponse);
     if (!event.isInterestedForInteractions ||
         touchResponse?.lineBarSpots == null ||
         touchResponse!.lineBarSpots!.isEmpty) {
@@ -121,6 +185,23 @@ class _LineChartState extends AnimatedWidgetBaseState<LineChart> {
         ..clear()
         ..add(ShowingTooltipIndicators(sortedLineSpots));
     });
+
+    // If there is needed event and any lineBar with .isDraggable flag exists,
+    // sets indexes of needed spot and starts dragging process.
+    if (event is FlPanStartEvent || event is FlLongPressStart) {
+      final barIndex = touchResponse.lineBarSpots?.first.barIndex;
+      final spotIndex = touchResponse.lineBarSpots?.first.spotIndex;
+
+      if (spotIndex != null && barIndex != null) {
+        final isDraggable = widget.data.lineBarsData[barIndex].isDraggable;
+
+        if (isDraggable) {
+          setState(() {
+            _draggingSpotIndexes = (barIndex, spotIndex);
+          });
+        }
+      }
+    }
   }
 
   @override