Fixed showing tooltip problem when animating chart, imaNNeo#647.

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## newVersion
 * **BUGFIX** Fixed bug of lerping FlSpot.nullSpot, #487.
+* **BUGFIX** Fixed showing tooltip problem when animating chart, #647.
+* **BREAKING** You should provide `spotsIndices` instead of `showingSpots` in [ShowingTooltipIndicators](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#showingtooltipindicators).
 
 ## 0.35.0
 * **IMPROVEMENT** Added `children` property in the [LineTooltipItem](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#linetooltipitem), [BarTooltipItem](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#bartooltipitem) and [ScatterTooltipItem](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/scatter_chart.md#scattertooltipitem) which accepts a list of [TextSpan](https://api.flutter.dev/flutter/painting/TextSpan-class.html). It allows you to have more customized texts inside the tooltip. See [BarChartSample1](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#sample-1-source-code) and [ScatterSample2](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/scatter_chart.md#sample-2-source-code), #72, #294.

example/lib/line_chart/samples/line_chart_sample5.dart

@@ -54,9 +54,8 @@ class LineChartSample5 extends StatelessWidget {
       child: LineChart(
         LineChartData(
           showingTooltipIndicators: showIndexes.map((index) {
-            return ShowingTooltipIndicators(index, [
-              LineBarSpot(
-                  tooltipsOnBar, lineBarsData.indexOf(tooltipsOnBar), tooltipsOnBar.spots[index]),
+            return ShowingTooltipIndicators(0, [
+              index,
             ]);
           }).toList(),
           lineTouchData: LineTouchData(

lib/src/chart/line_chart/line_chart.dart

@@ -97,7 +97,8 @@ class _LineChartState extends AnimatedWidgetBaseState<LineChart> {
         }
 
         _showingTouchedTooltips.clear();
-        _showingTouchedTooltips.add(ShowingTooltipIndicators(0, sortedLineSpots));
+        _showingTouchedTooltips
+            .add(ShowingTooltipIndicators(0, sortedLineSpots.map((e) => e.spotIndex).toList()));
       });
     } else {
       setState(() {

lib/src/chart/line_chart/line_chart_data.dart

@@ -1686,18 +1686,18 @@ class ShowingTooltipIndicators with EquatableMixin {
   final int lineIndex;
 
   /// Determines the spots that each tooltip should be shown.
-  final List<LineBarSpot> showingSpots;
+  final List<int> spotsIndices;
 
   /// [LineChart] shows some tooltips over each [LineChartBarData],
   /// [lineIndex] determines the index of [LineChartBarData],
-  /// and [showingSpots] determines in which spots this tooltip should be shown.
-  ShowingTooltipIndicators(int lineIndex, List<LineBarSpot> showingSpots)
+  /// and [spotsIndices] determines in which spots this tooltip should be shown.
+  ShowingTooltipIndicators(int lineIndex, List<int> spotsIndices)
       : lineIndex = lineIndex,
-        showingSpots = showingSpots;
+        spotsIndices = spotsIndices;
 
   /// Used for equality check, see [EquatableMixin].
   @override
-  List<Object?> get props => [lineIndex, showingSpots];
+  List<Object?> get props => [lineIndex, spotsIndices];
 }
 
 /// [LineChart]'s touch callback.

lib/src/chart/line_chart/line_chart_painter.dart

@@ -66,7 +66,8 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
   @override
   void paint(CanvasWrapper canvasWrapper, PaintHolder<LineChartData> holder) {
     final data = holder.data;
-    if (data.lineBarsData.isEmpty) {
+    final targetData = holder.targetData;
+    if (data.lineBarsData.isEmpty || targetData.lineBarsData.isEmpty) {
       return;
     }
 
@@ -115,24 +116,28 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
     _drawTitles(canvasWrapper, holder);
 
     // Draw touch tooltip on most top spot
-    for (var i = 0; i < data.showingTooltipIndicators.length; i++) {
-      var tooltipSpots = data.showingTooltipIndicators[i];
+    for (var i = 0; i < targetData.showingTooltipIndicators.length; i++) {
+      var tooltipSpots = targetData.showingTooltipIndicators[i];
 
-      final showingBarSpots = tooltipSpots.showingSpots;
+      final showingBarSpots = tooltipSpots.spotsIndices;
       if (showingBarSpots.isEmpty) {
         continue;
       }
-      final barSpots = List<LineBarSpot>.of(showingBarSpots);
-      FlSpot topSpot = barSpots[0];
-      for (var barSpot in barSpots) {
-        if (barSpot.y > topSpot.y) {
-          topSpot = barSpot;
+      final barSpotsIndex = List<int>.of(showingBarSpots);
+      final line = targetData.lineBarsData[tooltipSpots.lineIndex];
+      var topSpot = line.spots[barSpotsIndex.first];
+      for (var index in barSpotsIndex) {
+        final checkingSpot = line.spots[index];
+        if (checkingSpot.y > topSpot.y) {
+          print(index);
+          topSpot = checkingSpot;
         }
       }
-      tooltipSpots = ShowingTooltipIndicators(tooltipSpots.lineIndex, barSpots);
+      tooltipSpots = ShowingTooltipIndicators(tooltipSpots.lineIndex, barSpotsIndex);
 
       _drawTouchTooltip(
         canvasWrapper,
+        line,
         data.lineTouchData.touchTooltipData,
         topSpot,
         tooltipSpots,
@@ -1142,6 +1147,7 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
 
   void _drawTouchTooltip(
       CanvasWrapper canvasWrapper,
+      LineChartBarData barLine,
       LineTouchTooltipData tooltipData,
       FlSpot showOnSpot,
       ShowingTooltipIndicators showingTooltipSpots,
@@ -1154,12 +1160,17 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
     /// creating TextPainters to calculate the width and height of the tooltip
     final drawingTextPainters = <TextPainter>[];
 
-    final tooltipItems = tooltipData.getTooltipItems(showingTooltipSpots.showingSpots);
-    if (tooltipItems.length != showingTooltipSpots.showingSpots.length) {
+    final barLineIndex = showingTooltipSpots.lineIndex;
+
+    final lineBarSpots = showingTooltipSpots.spotsIndices
+        .map((index) => LineBarSpot(barLine, barLineIndex, barLine.spots[index]))
+        .toList();
+    final tooltipItems = tooltipData.getTooltipItems(lineBarSpots);
+    if (tooltipItems.length != showingTooltipSpots.spotsIndices.length) {
       throw Exception('tooltipItems and touchedSpots size should be same');
     }
 
-    for (var i = 0; i < showingTooltipSpots.showingSpots.length; i++) {
+    for (var i = 0; i < showingTooltipSpots.spotsIndices.length; i++) {
       final tooltipItem = tooltipItems[i];
       if (tooltipItem == null) {
         continue;

test/chart/data_pool.dart

@@ -1534,11 +1534,11 @@ final BetweenBarsData betweenBarsData8 = BetweenBarsData(
 
 final ShowingTooltipIndicators showingTooltipIndicator1 = ShowingTooltipIndicators(
   1,
-  [lineBarSpot1, lineBarSpot2],
+  [1, 2],
 );
 final ShowingTooltipIndicators showingTooltipIndicator1Clone = ShowingTooltipIndicators(
   1,
-  [lineBarSpot1, lineBarSpot2],
+  [1, 2],
 );
 final ShowingTooltipIndicators showingTooltipIndicator2 = ShowingTooltipIndicators(
   33,
@@ -1550,11 +1550,11 @@ final ShowingTooltipIndicators showingTooltipIndicator3 = ShowingTooltipIndicato
 );
 final ShowingTooltipIndicators showingTooltipIndicator4 = ShowingTooltipIndicators(
   1,
-  [lineBarSpot2, lineBarSpot1],
+  [2, 1],
 );
 final ShowingTooltipIndicators showingTooltipIndicator5 = ShowingTooltipIndicators(
   2,
-  [lineBarSpot1, lineBarSpot2],
+  [1, 2],
 );
 
 final LineChartData lineChartData1 = LineChartData(