fl_chart
fl_chart copied to clipboard
Above/Below graph positioning of tooltips
** 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.
Suggestion
Perhaps a counterpart to ShowOnTopOfTheChartBoxArea
and also making those values settable on a per-tooltip basis would be a good approach.
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.