Added Tooltip border color and width support

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## newVersion
 * **BUGFIX** Fix `FlSpot.nullSpot` at the first of list bug, #912.
+* **FEATURE** Add `tooltipBorderColor` and `tooltipBorderWidth` property in the [LineTouchTooltipData], [BarTouchTooltipData], [ScatterTouchTooltipData],  #692.
 
 ## 0.45.0
 * **BUGFIX** Fix `clipData` implementation in ScatterChart and LineChart, #897.
@@ -384,4 +385,4 @@ LineTouchData(
 * restricted to access private classes of the library
 
 
-## 0.0.1 - Released on (2019 June 4)
+## 0.0.1 - Released on (2019 June 4)

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -642,6 +642,12 @@ class BarTouchTooltipData with EquatableMixin {
   /// The tooltip background color.
   final Color tooltipBgColor;
 
+  /// The tooltip border color.
+  final Color tooltipBorderColor;
+
+  /// The tooltip border stroke width.
+  final double tooltipBorderWidth;
+
   /// Sets a rounded radius for the tooltip.
   final double tooltipRoundedRadius;
 
@@ -684,6 +690,8 @@ class BarTouchTooltipData with EquatableMixin {
   /// also you can set [fitInsideVertically] true to force it to shift inside the chart vertically.
   BarTouchTooltipData({
     Color? tooltipBgColor,
+    Color? tooltipBorderColor,
+    double? tooltipBorderWidth,
     double? tooltipRoundedRadius,
     EdgeInsets? tooltipPadding,
     double? tooltipMargin,
@@ -694,6 +702,8 @@ class BarTouchTooltipData with EquatableMixin {
     TooltipDirection? direction,
     double? rotateAngle,
   })  : tooltipBgColor = tooltipBgColor ?? Colors.blueGrey.darken(15),
+        tooltipBorderColor = tooltipBorderColor ?? Colors.black,
+        tooltipBorderWidth = tooltipBorderWidth ?? 0.0,
         tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
         tooltipPadding = tooltipPadding ??
             const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
@@ -710,6 +720,8 @@ class BarTouchTooltipData with EquatableMixin {
   @override
   List<Object?> get props => [
         tooltipBgColor,
+        tooltipBorderColor,
+        tooltipBorderWidth,
         tooltipRoundedRadius,
         tooltipPadding,
         tooltipMargin,

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -14,7 +14,7 @@ import 'bar_chart_extensions.dart';
 
 /// Paints [BarChartData] in the canvas, it can be used in a [CustomPainter]
 class BarChartPainter extends AxisChartPainter<BarChartData> {
-  late Paint _barPaint, _barStrokePaint, _bgTouchTooltipPaint;
+  late Paint _barPaint, _barStrokePaint, _bgTouchTooltipPaint, _bgTouchTooltipBorderPaint;
 
   List<GroupBarsPosition>? _groupBarsPosition;
 
@@ -33,6 +33,10 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
     _bgTouchTooltipPaint = Paint()
       ..style = PaintingStyle.fill
       ..color = Colors.white;
+
+    _bgTouchTooltipBorderPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = Colors.white;
   }
 
   /// Paints [BarChartData] into the provided canvas.
@@ -668,6 +672,10 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
         bottomLeft: radius,
         bottomRight: radius);
     _bgTouchTooltipPaint.color = tooltipData.tooltipBgColor;
+    if (tooltipData.tooltipBorderWidth > 0) {
+      _bgTouchTooltipBorderPaint.color = tooltipData.tooltipBorderColor;
+      _bgTouchTooltipBorderPaint.strokeWidth = tooltipData.tooltipBorderWidth;
+    }
 
     final rotateAngle = tooltipData.rotateAngle;
     final rectRotationOffset =
@@ -690,6 +698,9 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
       angle: rotateAngle,
       drawCallback: () {
         canvasWrapper.drawRRect(roundedRect, _bgTouchTooltipPaint);
+        if (tooltipData.tooltipBorderWidth > 0) {
+          canvasWrapper.drawRRect(roundedRect, _bgTouchTooltipBorderPaint);
+        }
         canvasWrapper.drawText(tp, drawOffset);
       },
     );

lib/src/chart/line_chart/line_chart_data.dart

@@ -1569,6 +1569,12 @@ class LineTouchTooltipData with EquatableMixin {
   /// The tooltip background color.
   final Color tooltipBgColor;
 
+  /// The tooltip border color.
+  final Color tooltipBorderColor;
+
+  /// The tooltip border stroke width.
+  final double tooltipBorderWidth;
+
   /// Sets a rounded radius for the tooltip.
   final double tooltipRoundedRadius;
 
@@ -1611,6 +1617,8 @@ class LineTouchTooltipData with EquatableMixin {
   /// also you can set [fitInsideVertically] true to force it to shift inside the chart vertically.
   LineTouchTooltipData({
     Color? tooltipBgColor,
+    Color? tooltipBorderColor,
+    double? tooltipBorderWidth,
     double? tooltipRoundedRadius,
     EdgeInsets? tooltipPadding,
     double? tooltipMargin,
@@ -1621,6 +1629,8 @@ class LineTouchTooltipData with EquatableMixin {
     bool? showOnTopOfTheChartBoxArea,
     double? rotateAngle,
   })  : tooltipBgColor = tooltipBgColor ?? Colors.blueGrey.darken(15),
+        tooltipBorderColor = tooltipBorderColor ?? Colors.black,
+        tooltipBorderWidth = tooltipBorderWidth ?? 0.0,
         tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
         tooltipPadding = tooltipPadding ??
             const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
@@ -1637,6 +1647,8 @@ class LineTouchTooltipData with EquatableMixin {
   @override
   List<Object?> get props => [
         tooltipBgColor,
+        tooltipBorderColor,
+        tooltipBorderWidth,
         tooltipRoundedRadius,
         tooltipPadding,
         tooltipMargin,

lib/src/chart/line_chart/line_chart_painter.dart

@@ -23,6 +23,7 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
       _extraLinesPaint,
       _touchLinePaint,
       _bgTouchTooltipPaint,
+      _bgTouchTooltipBorderPaint,
       _imagePaint;
 
   /// Paints [data] into canvas, it is the animating [LineChartData],
@@ -55,6 +56,10 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
       ..style = PaintingStyle.fill
       ..color = Colors.white;
 
+    _bgTouchTooltipBorderPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = Colors.white;
+
     _imagePaint = Paint();
   }
 
@@ -1357,6 +1362,10 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
         bottomLeft: radius,
         bottomRight: radius);
     _bgTouchTooltipPaint.color = tooltipData.tooltipBgColor;
+    if (tooltipData.tooltipBorderWidth > 0) {
+      _bgTouchTooltipBorderPaint.color = tooltipData.tooltipBorderColor;
+      _bgTouchTooltipBorderPaint.strokeWidth = tooltipData.tooltipBorderWidth;
+    }
 
     final rotateAngle = tooltipData.rotateAngle;
     final rectRotationOffset =
@@ -1373,6 +1382,9 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
       angle: rotateAngle,
       drawCallback: () {
         canvasWrapper.drawRRect(roundedRect, _bgTouchTooltipPaint);
+        if (tooltipData.tooltipBorderWidth > 0) {
+          canvasWrapper.drawRRect(roundedRect, _bgTouchTooltipBorderPaint);
+        }
       },
     );
 

lib/src/chart/scatter_chart/scatter_chart_data.dart

@@ -379,6 +379,12 @@ class ScatterTouchTooltipData with EquatableMixin {
   /// The tooltip background color.
   final Color tooltipBgColor;
 
+  /// The tooltip border color.
+  final Color tooltipBorderColor;
+
+  /// The tooltip border stroke width.
+  final double tooltipBorderWidth;  
+
   /// Sets a rounded radius for the tooltip.
   final double tooltipRoundedRadius;
 
@@ -414,6 +420,8 @@ class ScatterTouchTooltipData with EquatableMixin {
   /// also you can set [fitInsideVertically] true to force it to shift inside the chart vertically.
   ScatterTouchTooltipData({
     Color? tooltipBgColor,
+    Color? tooltipBorderColor,
+    double? tooltipBorderWidth,
     double? tooltipRoundedRadius,
     EdgeInsets? tooltipPadding,
     double? maxContentWidth,
@@ -422,6 +430,8 @@ class ScatterTouchTooltipData with EquatableMixin {
     bool? fitInsideVertically,
     double? rotateAngle,
   })  : tooltipBgColor = tooltipBgColor ?? Colors.blueGrey.darken(15),
+        tooltipBorderColor = tooltipBorderColor ?? Colors.black,
+        tooltipBorderWidth = tooltipBorderWidth ?? 0.0,
         tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
         tooltipPadding = tooltipPadding ??
             const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
@@ -436,6 +446,8 @@ class ScatterTouchTooltipData with EquatableMixin {
   @override
   List<Object?> get props => [
         tooltipBgColor,
+        tooltipBorderColor,
+        tooltipBorderWidth,
         tooltipRoundedRadius,
         tooltipPadding,
         maxContentWidth,
@@ -449,6 +461,8 @@ class ScatterTouchTooltipData with EquatableMixin {
   /// and replaces provided values.
   ScatterTouchTooltipData copyWith({
     Color? tooltipBgColor,
+    Color? tooltipBorderColor,
+    double? tooltipBorderWidth,
     double? tooltipRoundedRadius,
     EdgeInsets? tooltipPadding,
     double? maxContentWidth,
@@ -459,6 +473,8 @@ class ScatterTouchTooltipData with EquatableMixin {
   }) {
     return ScatterTouchTooltipData(
       tooltipBgColor: tooltipBgColor ?? this.tooltipBgColor,
+      tooltipBorderColor: tooltipBorderColor ?? this.tooltipBorderColor,
+      tooltipBorderWidth: tooltipBorderWidth ?? this.tooltipBorderWidth,
       tooltipRoundedRadius: tooltipRoundedRadius ?? this.tooltipRoundedRadius,
       tooltipPadding: tooltipPadding ?? this.tooltipPadding,
       maxContentWidth: maxContentWidth ?? this.maxContentWidth,

lib/src/chart/scatter_chart/scatter_chart_painter.dart

@@ -11,7 +11,7 @@ import 'scatter_chart_data.dart';
 /// Paints [ScatterChartData] in the canvas, it can be used in a [CustomPainter]
 class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
   /// [_spotsPaint] is responsible to draw scatter spots
-  late Paint _spotsPaint, _bgTouchTooltipPaint;
+  late Paint _spotsPaint, _bgTouchTooltipPaint, _bgTouchTooltipBorderPaint;
 
   /// Paints [data] into canvas, it is the animating [ScatterChartData],
   /// [targetData] is the animation's target and remains the same
@@ -27,6 +27,10 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
     _bgTouchTooltipPaint = Paint()
       ..style = PaintingStyle.fill
       ..color = Colors.white;
+
+    _bgTouchTooltipBorderPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = Colors.white;
   }
 
   /// Paints [ScatterChartData] into the provided canvas.
@@ -420,6 +424,10 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
         bottomLeft: radius,
         bottomRight: radius);
     _bgTouchTooltipPaint.color = tooltipData.tooltipBgColor;
+    if (tooltipData.tooltipBorderWidth > 0) {
+      _bgTouchTooltipBorderPaint.color = tooltipData.tooltipBorderColor;
+      _bgTouchTooltipBorderPaint.strokeWidth = tooltipData.tooltipBorderWidth;
+    }
 
     final rotateAngle = tooltipData.rotateAngle;
     final rectRotationOffset =
@@ -443,6 +451,9 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
       angle: rotateAngle,
       drawCallback: () {
         canvasWrapper.drawRRect(roundedRect, _bgTouchTooltipPaint);
+        if (tooltipData.tooltipBorderWidth > 0) {
+          canvasWrapper.drawRRect(roundedRect, _bgTouchTooltipBorderPaint);
+        }
         canvasWrapper.drawText(drawingTextPainter, drawOffset);
       },
     );