Dynamically changing tooltipBgColor

CHANGELOG.md

@@ -1,12 +1,16 @@
 ## nextVersion
 * **FEATURE** (by @Dartek12): Added gradient to [FlLine](https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/base_chart.md#FlLine), #1197
+* **FEATURE**  (by @apekshamehta) Added new method called getTooltipColor for axis charts (bar,line,scatter) to change backgroud color of tooltip dynamically.[issue](https://github.com/imaNNeo/fl_chart/issues/1279).
+* **BREAKING** (by @apekshamehta) Removed tooltipBgColor property from Bar, Line and Scatter Charts.
+
 
 ## 0.64.0
 * **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
 * **IMPROVEMENT** (by @imaNNeo) Consider fraction digits when formatting chart side titles, #1267
 
+
 ## 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
 * **BUGFIX** (by @imaNNeo) Fix ScatterChart long-press interaction bug (disappears when long-pressing on the chart), #1318

example/lib/presentation/samples/bar/bar_chart_sample1.dart

@@ -162,7 +162,19 @@ class BarChartSample1State extends State<BarChartSample1> {
     return BarChartData(
       barTouchData: BarTouchData(
         touchTooltipData: BarTouchTooltipData(
-          tooltipBgColor: Colors.blueGrey,
+          getTooltipColor: (group) {
+            Color bgColor = switch (group.x) {
+              0 => AppColors.contentColorPurple.withAlpha(100),
+              1 => AppColors.contentColorYellow.withAlpha(100),
+              2 => AppColors.contentColorBlue.withAlpha(100),
+              3 => AppColors.contentColorOrange.withAlpha(100),
+              4 => AppColors.contentColorPink.withAlpha(100),
+              5 => AppColors.contentColorRed.withAlpha(100),
+              6 => AppColors.contentColorPurple.withAlpha(150),
+              _ => throw Error(),
+            };
+            return bgColor;
+          },
           tooltipHorizontalAlignment: FLHorizontalAlignment.right,
           tooltipMargin: -10,
           getTooltipItem: (group, groupIndex, rod, rodIndex) {
@@ -202,8 +214,8 @@ class BarChartSample1State extends State<BarChartSample1> {
               children: <TextSpan>[
                 TextSpan(
                   text: (rod.toY - 1).toString(),
-                  style: TextStyle(
-                    color: widget.touchedBarColor,
+                  style: const TextStyle(
+                    color: Colors.white, //widget.touchedBarColor,
                     fontSize: 16,
                     fontWeight: FontWeight.w500,
                   ),

example/lib/presentation/samples/bar/bar_chart_sample2.dart

@@ -85,7 +85,9 @@ class BarChartSample2State extends State<BarChartSample2> {
                   maxY: 20,
                   barTouchData: BarTouchData(
                     touchTooltipData: BarTouchTooltipData(
-                      tooltipBgColor: Colors.grey,
+                      getTooltipColor: ((group) {
+                        return Colors.grey;
+                      }),
                       getTooltipItem: (a, b, c, d) => null,
                     ),
                     touchCallback: (FlTouchEvent event, response) {

example/lib/presentation/samples/bar/bar_chart_sample3.dart

@@ -24,7 +24,7 @@ class _BarChart extends StatelessWidget {
   BarTouchData get barTouchData => BarTouchData(
         enabled: false,
         touchTooltipData: BarTouchTooltipData(
-          tooltipBgColor: Colors.transparent,
+          getTooltipColor: (group) => Colors.transparent,
           tooltipPadding: EdgeInsets.zero,
           tooltipMargin: 8,
           getTooltipItem: (

example/lib/presentation/samples/bar/bar_chart_sample7.dart

@@ -122,7 +122,7 @@ class _BarChartSample7State extends State<BarChartSample7> {
               enabled: true,
               handleBuiltInTouches: false,
               touchTooltipData: BarTouchTooltipData(
-                tooltipBgColor: Colors.transparent,
+                getTooltipColor: (group) => Colors.transparent,
                 tooltipMargin: 0,
                 getTooltipItem: (
                   BarChartGroupData group,

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

@@ -42,7 +42,7 @@ class _LineChart extends StatelessWidget {
   LineTouchData get lineTouchData1 => LineTouchData(
         handleBuiltInTouches: true,
         touchTooltipData: LineTouchTooltipData(
-          tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
+          getTooltipColor: (touchedSpot) => Colors.blueGrey.withOpacity(0.8),
         ),
       );
 

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

@@ -206,7 +206,22 @@ class _LineChartSample3State extends State<LineChartSample3> {
                     }).toList();
                   },
                   touchTooltipData: LineTouchTooltipData(
-                    tooltipBgColor: widget.tooltipBgColor,
+                    getTooltipColor: (touchedSpot) {
+                      Color bgColor = switch ((
+                        touchedSpot.x.toInt(),
+                        touchedSpot.y.toDouble()
+                      )) {
+                        (0, 1.3) => AppColors.contentColorPurple.withAlpha(100),
+                        (1, 1) => AppColors.contentColorYellow.withAlpha(100),
+                        (2, 1.8) => AppColors.contentColorBlue.withAlpha(100),
+                        (3, 1.5) => AppColors.contentColorOrange.withAlpha(100),
+                        (4, 2.2) => AppColors.contentColorPink.withAlpha(100),
+                        (5, 1.8) => AppColors.contentColorRed.withAlpha(100),
+                        (6, 3) => AppColors.contentColorPurple.withAlpha(150),
+                        _ => throw Error(),
+                      };
+                      return bgColor;
+                    },
                     getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
                       return touchedBarSpots.map((barSpot) {
                         final flSpot = barSpot;

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

@@ -181,7 +181,7 @@ class _LineChartSample5State extends State<LineChartSample5> {
                   }).toList();
                 },
                 touchTooltipData: LineTouchTooltipData(
-                  tooltipBgColor: Colors.pink,
+                  getTooltipColor: (touchedSpot) => Colors.pink,
                   tooltipRoundedRadius: 8,
                   getTooltipItems: (List<LineBarSpot> lineBarsSpot) {
                     return lineBarsSpot.map((lineBarSpot) {

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

@@ -237,8 +237,8 @@ class _LineChartSample8State extends State<LineChartSample8> {
             );
           }).toList();
         },
-        touchTooltipData: const LineTouchTooltipData(
-          tooltipBgColor: AppColors.contentColorBlue,
+        touchTooltipData: LineTouchTooltipData(
+          getTooltipColor: (touchedSpot) => AppColors.contentColorBlue,
         ),
       ),
       borderData: FlBorderData(

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

@@ -59,7 +59,7 @@ class LineChartSample9 extends StatelessWidget {
                 lineTouchData: LineTouchData(
                   touchTooltipData: LineTouchTooltipData(
                     maxContentWidth: 100,
-                    tooltipBgColor: Colors.black,
+                    getTooltipColor: (touchedSpot) => Colors.black,
                     getTooltipItems: (touchedSpots) {
                       return touchedSpots.map((LineBarSpot touchedSpot) {
                         final textStyle = TextStyle(

example/lib/presentation/samples/scatter/scatter_chart_sample2.dart

@@ -121,7 +121,23 @@ class _ScatterChartSample2State extends State {
                   : SystemMouseCursors.click;
             },
             touchTooltipData: ScatterTouchTooltipData(
-              tooltipBgColor: Colors.black,
+              getTooltipColor: (ScatterSpot touchedBarSpot) {
+                Color bgColor = switch ((
+                  touchedBarSpot.x.toInt(),
+                  touchedBarSpot.y.toInt()
+                )) {
+                  (4, 4) => AppColors.contentColorPurple.withAlpha(100),
+                  (2, 5) => AppColors.contentColorYellow.withAlpha(100),
+                  (4, 5) => AppColors.contentColorBlue.withAlpha(100),
+                  (8, 6) => AppColors.contentColorOrange.withAlpha(100),
+                  (5, 7) => AppColors.contentColorPink.withAlpha(100),
+                  (7, 2) => AppColors.contentColorRed.withAlpha(100),
+                  (3, 2) => AppColors.contentColorPurple.withAlpha(150),
+                  (2, 8) => AppColors.contentColorYellow.withAlpha(100),
+                  _ => throw Error(),
+                };
+                return bgColor;
+              },
               getTooltipItems: (ScatterSpot touchedBarSpot) {
                 return ScatterTooltipItem(
                   'X: ',

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -681,7 +681,7 @@ class BarTouchTooltipData with EquatableMixin {
   /// if [BarTouchData.handleBuiltInTouches] is true,
   /// [BarChart] shows a tooltip popup on top of rods automatically when touch happens,
   /// otherwise you can show it manually using [BarChartGroupData.showingTooltipIndicators].
-  /// Tooltip shows on top of rods, with [tooltipBgColor] as a background color,
+  /// Tooltip shows on top of rods, with [getTooltipColor] as a background color,
   /// and you can set corner radius using [tooltipRoundedRadius].
   /// If you want to have a padding inside the tooltip, fill [tooltipPadding],
   /// or If you want to have a bottom margin, set [tooltipMargin].
@@ -692,21 +692,20 @@ class BarTouchTooltipData with EquatableMixin {
   /// you can set [fitInsideHorizontally] true to force it to shift inside the chart horizontally,
   /// also you can set [fitInsideVertically] true to force it to shift inside the chart vertically.
   BarTouchTooltipData({
-    Color? tooltipBgColor,
     double? tooltipRoundedRadius,
     EdgeInsets? tooltipPadding,
     double? tooltipMargin,
     FLHorizontalAlignment? tooltipHorizontalAlignment,
     double? tooltipHorizontalOffset,
     double? maxContentWidth,
     GetBarTooltipItem? getTooltipItem,
+    GetBarTooltipColor? getTooltipColor,
     bool? fitInsideHorizontally,
     bool? fitInsideVertically,
     TooltipDirection? direction,
     double? rotateAngle,
     BorderSide? tooltipBorder,
-  })  : tooltipBgColor = tooltipBgColor ?? Colors.blueGrey.darken(15),
-        tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
+  })  : tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
         tooltipPadding = tooltipPadding ??
             const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
         tooltipMargin = tooltipMargin ?? 16,
@@ -715,16 +714,14 @@ class BarTouchTooltipData with EquatableMixin {
         tooltipHorizontalOffset = tooltipHorizontalOffset ?? 0,
         maxContentWidth = maxContentWidth ?? 120,
         getTooltipItem = getTooltipItem ?? defaultBarTooltipItem,
+        getTooltipColor = getTooltipColor ?? defaultBarTooltipColor,
         fitInsideHorizontally = fitInsideHorizontally ?? false,
         fitInsideVertically = fitInsideVertically ?? false,
         direction = direction ?? TooltipDirection.auto,
         rotateAngle = rotateAngle ?? 0.0,
         tooltipBorder = tooltipBorder ?? BorderSide.none,
         super();
 
-  /// The tooltip background color.
-  final Color tooltipBgColor;
-
   /// Sets a rounded radius for the tooltip.
   final double tooltipRoundedRadius;
 
@@ -761,10 +758,12 @@ class BarTouchTooltipData with EquatableMixin {
   /// The tooltip border color.
   final BorderSide tooltipBorder;
 
+  /// Retrieves data for setting background color of the tooltip.
+  final GetBarTooltipColor getTooltipColor;
+
   /// Used for equality check, see [EquatableMixin].
   @override
   List<Object?> get props => [
-        tooltipBgColor,
         tooltipRoundedRadius,
         tooltipPadding,
         tooltipMargin,
@@ -776,6 +775,7 @@ class BarTouchTooltipData with EquatableMixin {
         fitInsideVertically,
         rotateAngle,
         tooltipBorder,
+        getTooltipColor,
       ];
 }
 
@@ -845,6 +845,20 @@ class BarTooltipItem with EquatableMixin {
       ];
 }
 
+//// Provides a [Color] to show different background color for each rod
+///
+/// You can override [BarTouchTooltipData.getTooltipColor], it gives you
+/// [group] that touch happened on, then you should and pass your custom [Color] to set background color
+/// of tooltip popup.
+typedef GetBarTooltipColor = Color Function(
+  BarChartGroupData group,
+);
+
+/// Default implementation for [BarTouchTooltipData.getTooltipColor].
+Color defaultBarTooltipColor(BarChartGroupData group) {
+  return Colors.blueGrey.darken(15);
+}
+
 /// Holds information about touch response in the [BarChart].
 ///
 /// You can override [BarTouchData.touchCallback] to handle touch events,

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -463,7 +463,9 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
       bottomLeft: radius,
       bottomRight: radius,
     );
-    _bgTouchTooltipPaint.color = tooltipData.tooltipBgColor;
+
+    /// set tooltip's background color for each rod
+    _bgTouchTooltipPaint.color = tooltipData.getTooltipColor(showOnBarGroup);
 
     final rotateAngle = tooltipData.rotateAngle;
     final rectRotationOffset =

lib/src/chart/line_chart/line_chart_data.dart

@@ -1226,7 +1226,7 @@ class LineTouchTooltipData with EquatableMixin {
   /// if [LineTouchData.handleBuiltInTouches] is true,
   /// [LineChart] shows a tooltip popup on top of spots automatically when touch happens,
   /// otherwise you can show it manually using [LineChartData.showingTooltipIndicators].
-  /// Tooltip shows on top of spots, with [tooltipBgColor] as a background color,
+  /// Tooltip shows on top of spots, with [getTooltipColor] as a background color,
   /// and you can set corner radius using [tooltipRoundedRadius].
   /// If you want to have a padding inside the tooltip, fill [tooltipPadding],
   /// or If you want to have a bottom margin, set [tooltipMargin].
@@ -1237,7 +1237,6 @@ class LineTouchTooltipData with EquatableMixin {
   /// you can set [fitInsideHorizontally] true to force it to shift inside the chart horizontally,
   /// also you can set [fitInsideVertically] true to force it to shift inside the chart vertically.
   const LineTouchTooltipData({
-    this.tooltipBgColor = const Color.fromRGBO(96, 125, 139, 1),
     this.tooltipRoundedRadius = 4,
     this.tooltipPadding =
         const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
@@ -1246,16 +1245,14 @@ class LineTouchTooltipData with EquatableMixin {
     this.tooltipHorizontalOffset = 0,
     this.maxContentWidth = 120,
     this.getTooltipItems = defaultLineTooltipItem,
+    this.getTooltipColor = defaultLineTooltipColor,
     this.fitInsideHorizontally = false,
     this.fitInsideVertically = false,
     this.showOnTopOfTheChartBoxArea = false,
     this.rotateAngle = 0.0,
     this.tooltipBorder = BorderSide.none,
   });
 
-  /// The tooltip background color.
-  final Color tooltipBgColor;
-
   /// Sets a rounded radius for the tooltip.
   final double tooltipRoundedRadius;
 
@@ -1292,10 +1289,12 @@ class LineTouchTooltipData with EquatableMixin {
   /// The tooltip border color.
   final BorderSide tooltipBorder;
 
+  // /// Retrieves data for setting background color of the tooltip.
+  final GetLineTooltipColor getTooltipColor;
+
   /// Used for equality check, see [EquatableMixin].
   @override
   List<Object?> get props => [
-        tooltipBgColor,
         tooltipRoundedRadius,
         tooltipPadding,
         tooltipMargin,
@@ -1308,6 +1307,7 @@ class LineTouchTooltipData with EquatableMixin {
         showOnTopOfTheChartBoxArea,
         rotateAngle,
         tooltipBorder,
+        getTooltipColor,
       ];
 }
 
@@ -1336,6 +1336,21 @@ List<LineTooltipItem> defaultLineTooltipItem(List<LineBarSpot> touchedSpots) {
   }).toList();
 }
 
+//// Provides a [Color] to show different background color for each touched spot
+///
+/// You can override [LineTouchTooltipData.getTooltipColor], it gives you
+/// [touchedSpot] object that touch happened on, then you should and pass your custom [Color] list
+/// (length should be equal to the [touchedSpots.length]), to set background color
+/// of tooltip popup.
+typedef GetLineTooltipColor = Color Function(
+  LineBarSpot touchedSpot,
+);
+
+/// Default implementation for [LineTouchTooltipData.getTooltipColor].
+Color defaultLineTooltipColor(LineBarSpot touchedSpot) {
+  return Colors.blueGrey.darken(15);
+}
+
 /// Represent a targeted spot inside a line bar.
 class LineBarSpot extends FlSpot with EquatableMixin {
   /// [bar] is the [LineChartBarData] that this spot is inside of,

lib/src/chart/line_chart/line_chart_painter.dart

@@ -1120,7 +1120,15 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
       bottomLeft: radius,
       bottomRight: radius,
     );
-    _bgTouchTooltipPaint.color = tooltipData.tooltipBgColor;
+
+    var topSpot = showingTooltipSpots.showingSpots[0];
+    for (final barSpot in showingTooltipSpots.showingSpots) {
+      if (barSpot.y > topSpot.y) {
+        topSpot = barSpot;
+      }
+    }
+
+    _bgTouchTooltipPaint.color = tooltipData.getTooltipColor(topSpot);
 
     final rotateAngle = tooltipData.rotateAngle;
     final rectRotationOffset =