Search code examples
flutterflutter-dependenciesfl-chart

How to change fl chart tooltip position according in flutter


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

Screenshot

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
                )),
              );
            }
            ),

Solution

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