How to change fl chart tooltip position according in flutter

Question

I'm using fl_chart and I'm actually faced some problem. I need help to manipulate the fl_chart tooltip because of the problem below. When I touch a bar on the chart the showned tooltip has hidden part

The used code

touchTooltipData: BarTouchTooltipData(
            tooltipBgColor: Colors.white,
            tooltipBottomMargin: 1,
            tooltipRoundedRadius: 3,
            getTooltipItem: (group, groupIndex, rod, rodIndex) {
              String weekDay;
              switch (group.x.toInt()) {
                case 0:
                  weekDay = (widget.isKWh)
                      ? '${consoKwh(0)} KWh'
                      : '${montant(0) * 10000} FCFA';
                  break;
                case 1:
                  weekDay = (widget.isKWh)
                      ? '${consoKwh(1)} KWh'
                      : '${montant(1) * 10000} FCFA';
                  break;
              }
              return BarTooltipItem(
                weekDay,
                AppTheme.globalFont(
                    style: TextStyle(
                  color: LightColor.green1,
                  fontWeight: FontWeight.bold,
                  fontSize: 12
                )),
              );
            }
            ),

Answer 1

I think I found a solution to add a circle on fl_chart tooltip, using the circle character \u25CF

The shadow is for create a white border to the circle, using the charactere. You can see the result:

Img example tooltip with circle

Code bellow:

LineTooltipItem(
  "",
  TextStyle(
    fontWeight: FontWeight.normal,
    height: 1.5.h,
  ),
  textAlign: TextAlign.start,
  children: [
    TextSpan(
      text: "\u25CF\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0", // circle
      style: TextStyle(
        fontSize: 12.sp,
        color: widget.color,
        shadows: <Shadow>[
          Shadow(
            offset: Offset(shadowCircleOffsetNegative, shadowCircleOffset),
            blurRadius: 2,
            color: AppColors.colorWhite,
          ),
          Shadow(
            offset: Offset(shadowCircleOffset, shadowCircleOffsetNegative),
            blurRadius: blurRadius,
            color: AppColors.colorWhite,
          ),
          Shadow(
            offset: Offset(shadowCircleOffset, shadowCircleOffset),
            blurRadius: blurRadius,
            color: AppColors.colorWhite,
          ),
          Shadow(
            offset: Offset(
              shadowCircleOffsetNegative,
              shadowCircleOffsetNegative,
            ),
            blurRadius: blurRadius,
            color: AppColors.colorWhite,
          ),
        ],
      ),
    ),
    TextSpan(
      text: "${title}: ${AppUtils.doubleToMoneyReal(flSpot.y)} \u00A0\u00A0\u00A0",
      style: TextFontStyles.captionSemiboldXXXS(
        colorFont: AppColors.colorWhite,
      ),
    ),
  ],
)

The shadowCircleOffsetNegative and shadowCircleOffset should be -1 and 1, or -1.5 and 1.5, or -2 and 2. Just add this variables to your code to adjust the shadows as you like.

Answer 2

You can set BarTouchTooltipData.fitInsideHorizontally = true to force tooltip to fit inside the chart.