Add tooltip align to line and scatter chart

Author: tamasapps

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

@@ -163,7 +163,7 @@ class BarChartSample1State extends State<BarChartSample1> {
  barTouchData: BarTouchData(
  touchTooltipData: BarTouchTooltipData(
  tooltipBgColor: Colors.blueGrey,
- tooltipAlign: BarTooltipAlign.right,
+ tooltipAlign: FLTooltipAlign.right,
  tooltipMargin: -10,
  getTooltipItem: (group, groupIndex, rod, rodIndex) {
  String weekDay;

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -680,18 +680,6 @@ enum TooltipDirection {
  bottom,
 }
 
-/// Controls showing tooltip horizontal alignment relative to the rod.
-enum BarTooltipAlign {
- /// Tooltip shows horizontally center aligned with the rod.
- center,
-
- /// Tooltip shows on the left side of the rod.
- left,
-
- /// Tooltip shows on the right side of the rod.
- right,
-}
-
 /// Holds representation data for showing tooltip popup on top of rods.
 class BarTouchTooltipData with EquatableMixin {
  /// if [BarTouchData.handleBuiltInTouches] is true,
@@ -712,7 +700,7 @@ class BarTouchTooltipData with EquatableMixin {
  double? tooltipRoundedRadius,
  EdgeInsets? tooltipPadding,
  double? tooltipMargin,
- BarTooltipAlign? tooltipAlign,
+ FLTooltipAlign? tooltipAlign,
  double? tooltipHorizontalOffset,
  double? maxContentWidth,
  GetBarTooltipItem? getTooltipItem,
@@ -726,15 +714,15 @@ class BarTouchTooltipData with EquatableMixin {
  tooltipPadding = tooltipPadding ??
  const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  tooltipMargin = tooltipMargin ?? 16,
+ tooltipAlign = tooltipAlign ?? FLTooltipAlign.center,
+ tooltipHorizontalOffset = tooltipHorizontalOffset ?? 0,
  maxContentWidth = maxContentWidth ?? 120,
  getTooltipItem = getTooltipItem ?? defaultBarTooltipItem,
  fitInsideHorizontally = fitInsideHorizontally ?? false,
  fitInsideVertically = fitInsideVertically ?? false,
  direction = direction ?? TooltipDirection.auto,
  rotateAngle = rotateAngle ?? 0.0,
  tooltipBorder = tooltipBorder ?? BorderSide.none,
- tooltipAlign = tooltipAlign ?? BarTooltipAlign.center,
- tooltipHorizontalOffset = tooltipHorizontalOffset ?? 0,
  super();
 
  /// The tooltip background color.
@@ -750,7 +738,7 @@ class BarTouchTooltipData with EquatableMixin {
  final double tooltipMargin;
 
  /// Controls showing tooltip on left side, right side or center aligned with rod, default is center
- final BarTooltipAlign tooltipAlign;
+ final FLTooltipAlign tooltipAlign;
 
  /// Applies horizontal offset for showing tooltip, default is zero.
  final double tooltipHorizontalOffset;

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -393,15 +393,15 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
 
  double tooltipLeft;
  switch (tooltipData.tooltipAlign) {
- case BarTooltipAlign.center:
+ case FLTooltipAlign.center:
  tooltipLeft = barOffset.dx -
  (tooltipWidth / 2) +
  tooltipData.tooltipHorizontalOffset;
  break;
- case BarTooltipAlign.right:
+ case FLTooltipAlign.right:
  tooltipLeft = barOffset.dx + tooltipData.tooltipHorizontalOffset;
  break;
- case BarTooltipAlign.left:
+ case FLTooltipAlign.left:
  tooltipLeft =
  barOffset.dx - tooltipWidth + tooltipData.tooltipHorizontalOffset;
  break;

lib/src/chart/base/base_chart/base_chart_data.dart

@@ -190,3 +190,15 @@ typedef MouseCursorResolver<R extends BaseTouchResponse> = MouseCursor Function(
 abstract class BaseTouchResponse {
  BaseTouchResponse();
 }
+
+/// Controls showing tooltip horizontal alignment relative to the rod/spot.
+enum FLTooltipAlign {
+ /// Tooltip shows horizontally center aligned with the rod/spot.
+ center,
+
+ /// Tooltip shows on the left side of the rod/spot.
+ left,
+
+ /// Tooltip shows on the right side of the rod/spot.
+ right,
+}

lib/src/chart/line_chart/line_chart_data.dart

@@ -1292,6 +1292,8 @@ class LineTouchTooltipData with EquatableMixin {
  double? tooltipRoundedRadius,
  EdgeInsets? tooltipPadding,
  double? tooltipMargin,
+ FLTooltipAlign? tooltipAlign,
+ double? tooltipHorizontalOffset,
  double? maxContentWidth,
  GetLineTooltipItems? getTooltipItems,
  bool? fitInsideHorizontally,
@@ -1304,6 +1306,8 @@ class LineTouchTooltipData with EquatableMixin {
  tooltipPadding = tooltipPadding ??
  const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  tooltipMargin = tooltipMargin ?? 16,
+ tooltipAlign = tooltipAlign ?? FLTooltipAlign.center,
+ tooltipHorizontalOffset = tooltipHorizontalOffset ?? 0,
  maxContentWidth = maxContentWidth ?? 120,
  getTooltipItems = getTooltipItems ?? defaultLineTooltipItem,
  fitInsideHorizontally = fitInsideHorizontally ?? false,
@@ -1325,6 +1329,12 @@ class LineTouchTooltipData with EquatableMixin {
  /// Applies a bottom margin for showing tooltip on top of rods.
  final double tooltipMargin;
 
+ /// Controls showing tooltip on left side, right side or center aligned with spot, default is center
+ final FLTooltipAlign tooltipAlign;
+
+ /// Applies horizontal offset for showing tooltip, default is zero.
+ final double tooltipHorizontalOffset;
+
  /// Restricts the tooltip's width.
  final double maxContentWidth;
 

lib/src/chart/line_chart/line_chart_painter.dart

@@ -1037,9 +1037,26 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
  mostTopOffset.dy - tooltipHeight - tooltipData.tooltipMargin;
  }
 
+ double tooltipLeft;
+ switch (tooltipData.tooltipAlign) {
+ case FLTooltipAlign.center:
+ tooltipLeft = mostTopOffset.dx -
+ (tooltipWidth / 2) +
+ tooltipData.tooltipHorizontalOffset;
+ break;
+ case FLTooltipAlign.right:
+ tooltipLeft = mostTopOffset.dx + tooltipData.tooltipHorizontalOffset;
+ break;
+ case FLTooltipAlign.left:
+ tooltipLeft = mostTopOffset.dx -
+ tooltipWidth +
+ tooltipData.tooltipHorizontalOffset;
+ break;
+ }
+
  /// draw the background rect with rounded radius
  var rect = Rect.fromLTWH(
- mostTopOffset.dx - (tooltipWidth / 2),
+ tooltipLeft,
  tooltipTopPosition,
  tooltipWidth,
  tooltipHeight,

lib/src/chart/scatter_chart/scatter_chart_data.dart

@@ -398,6 +398,8 @@ class ScatterTouchTooltipData with EquatableMixin {
  Color? tooltipBgColor,
  double? tooltipRoundedRadius,
  EdgeInsets? tooltipPadding,
+ FLTooltipAlign? tooltipAlign,
+ double? tooltipHorizontalOffset,
  double? maxContentWidth,
  GetScatterTooltipItems? getTooltipItems,
  bool? fitInsideHorizontally,
@@ -408,6 +410,8 @@ class ScatterTouchTooltipData with EquatableMixin {
  tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
  tooltipPadding = tooltipPadding ??
  const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+ tooltipAlign = tooltipAlign ?? FLTooltipAlign.center,
+ tooltipHorizontalOffset = tooltipHorizontalOffset ?? 0,
  maxContentWidth = maxContentWidth ?? 120,
  getTooltipItems = getTooltipItems ?? defaultScatterTooltipItem,
  fitInsideHorizontally = fitInsideHorizontally ?? false,
@@ -425,6 +429,12 @@ class ScatterTouchTooltipData with EquatableMixin {
  /// Applies a padding for showing contents inside the tooltip.
  final EdgeInsets tooltipPadding;
 
+ /// Controls showing tooltip on left side, right side or center aligned with spot, default is center
+ final FLTooltipAlign tooltipAlign;
+
+ /// Applies horizontal offset for showing tooltip, default is zero.
+ final double tooltipHorizontalOffset;
+
  /// Restricts the tooltip's width.
  final double maxContentWidth;
 

lib/src/chart/scatter_chart/scatter_chart_painter.dart

@@ -251,9 +251,26 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
  final tooltipWidth = width + tooltipData.tooltipPadding.horizontal;
  final tooltipHeight = height + tooltipData.tooltipPadding.vertical;
 
+ double tooltipLeft;
+ switch (tooltipData.tooltipAlign) {
+ case FLTooltipAlign.center:
+ tooltipLeft = mostTopOffset.dx -
+ (tooltipWidth / 2) +
+ tooltipData.tooltipHorizontalOffset;
+ break;
+ case FLTooltipAlign.right:
+ tooltipLeft = mostTopOffset.dx + tooltipData.tooltipHorizontalOffset;
+ break;
+ case FLTooltipAlign.left:
+ tooltipLeft = mostTopOffset.dx -
+ tooltipWidth +
+ tooltipData.tooltipHorizontalOffset;
+ break;
+ }
+
  /// draw the background rect with rounded radius
  var rect = Rect.fromLTWH(
- mostTopOffset.dx - (tooltipWidth / 2),
+ tooltipLeft,
  mostTopOffset.dy -
  tooltipHeight -
  showOnSpot.radius -