Add horizontal alignment and offset to bar chart tooltip

Author: tamasapps

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

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

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -680,6 +680,18 @@ 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,
@@ -700,6 +712,8 @@ class BarTouchTooltipData with EquatableMixin {
  double? tooltipRoundedRadius,
  EdgeInsets? tooltipPadding,
  double? tooltipMargin,
+ BarTooltipAlign? tooltipAlign,
+ double? tooltipHorizontalOffset,
  double? maxContentWidth,
  GetBarTooltipItem? getTooltipItem,
  bool? fitInsideHorizontally,
@@ -719,6 +733,8 @@ class BarTouchTooltipData with EquatableMixin {
  direction = direction ?? TooltipDirection.auto,
  rotateAngle = rotateAngle ?? 0.0,
  tooltipBorder = tooltipBorder ?? BorderSide.none,
+ tooltipAlign = tooltipAlign ?? BarTooltipAlign.center,
+ tooltipHorizontalOffset = tooltipHorizontalOffset ?? 0,
  super();
 
  /// The tooltip background color.
@@ -733,6 +749,12 @@ class BarTouchTooltipData 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 rod, default is center
+ final BarTooltipAlign tooltipAlign;
+
+ /// Applies horizontal offset for showing tooltip, default is zero.
+ final double tooltipHorizontalOffset;
+
  /// Restricts the tooltip's width.
  final double maxContentWidth;
 

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -391,10 +391,26 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
  ? barTopY - tooltipHeight - tooltipData.tooltipMargin
  : barBottomY + tooltipData.tooltipMargin;
 
+ double tooltipLeft;
+ switch (tooltipData.tooltipAlign) {
+ case BarTooltipAlign.center:
+ tooltipLeft = barOffset.dx -
+ (tooltipWidth / 2) +
+ tooltipData.tooltipHorizontalOffset;
+ break;
+ case BarTooltipAlign.right:
+ tooltipLeft = barOffset.dx + tooltipData.tooltipHorizontalOffset;
+ break;
+ case BarTooltipAlign.left:
+ tooltipLeft =
+ barOffset.dx - tooltipWidth + tooltipData.tooltipHorizontalOffset;
+ break;
+ }
+
  /// draw the background rect with rounded radius
  // ignore: omit_local_variable_types
  Rect rect = Rect.fromLTWH(
- barOffset.dx,
+ tooltipLeft,
  tooltipTop,
  tooltipWidth,
  tooltipHeight,