fl_chart icon indicating copy to clipboard operation
fl_chart copied to clipboard

Above/Below graph positioning of tooltips

Open SpaceWaffles opened this issue 3 years ago • 1 comments

** Don't make a duplicate issue. Didn't see any other request for this

Is your feature request related to a problem? Please describe. Currently labels often cover the line graph making it hard to see.

Describe the solution you'd like I'd like to be able to, on a per-tooltip basis, specify whether the tooltip should be shown above or below the line graph.

Describe alternatives you've considered I've tried messing around with the padding/margin but that doesn't give me enough control and is not specified per-tooltip. I also considered using showOnTopOfTheChartBoxArea but in this particular case, where I want a tooltip for the max and min value, it is much more clear what the label means if the min tooltip is on bottom.

Additional context See attached image. Screenshot_20220202-160400

Suggestion Perhaps a counterpart to ShowOnTopOfTheChartBoxArea and also making those values settable on a per-tooltip basis would be a good approach.

SpaceWaffles avatar Feb 02 '22 23:02 SpaceWaffles

I tried todo something similar, by using the direction: TooltipDirection.top/bottom parameter

//Variable to change
  TooltipDirection tooltipPlacement = TooltipDirection.top;

////Inside your fl_chart
////
                          touchTooltipData: BarTouchTooltipData(
                              tooltipBgColor: currentTheme.horizontalSideTitle,
                              tooltipMargin: 1,
                              maxContentWidth: 300,
                              direction: tooltipPlacement,
                              fitInsideHorizontally: true,
                              fitInsideVertically: true,
                              getTooltipItem:
                                  (group, groupIndex, rod, rodIndex) {
                                return getToolTip(lastValues, group, groupIndex,
                                    rod, rodIndex);
                              }),

////In getToolTip()
double totCheck = snap[index].total;

    if(totCheck < (rod.toY/2)) {
          tooltipPlacement = TooltipDirection.top;
    }
    else {
      tooltipPlacement = TooltipDirection.bottom;
    }

//Use timer to setState(), only way that works so far... Will "blink" in last position if direction is update
    Timer(const Duration(milliseconds: 0), () {
      if (mounted) setState(() {});
    });

This kind of integration "kind of" works, but it is just a hack. I hoped that tooltip got a little more love and a TooltipDirection.center should also be included in future releases.

large avatar Jul 31 '22 20:07 large