Flutter FL_chart: How to display correctly the values inside the tooltip

254 Views Asked by At

I am struggling a lot to display the values in the tooltip correctly.

I'm using this package https://pub.dev/packages/fl_chart. There is the possibility of when you move the mouse over a line of the graph to show a tooltip with the data but of all the lines on the graph. I have 4 data that i want to display on the Tooltip. Max, Min, Avg and Count.

At this moment i get displayd as follows:

enter image description here

I would need that the Tooltip would display the data as follows:

enter image description here

Follows the code:

                    touchTooltipData: LineTouchTooltipData(
                      getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
                        final tooltips = <LineTooltipItem>[];

                        for (final barSpot in touchedBarSpots) {
                          final flSpot = barSpot.bar.spots[barSpot.spotIndex];
                          final max = flSpot.y;
                          final min = flSpot.y;
                          final avg = flSpot.y;
                          final count = flSpot.x.toInt();

                          final tooltipText =
                              "Max: ${max.toStringAsFixed(2)}\nMin: ${min.toStringAsFixed(2)}\nAvg: ${avg.toStringAsFixed(2)}\nCount: $count";
                          tooltips.add(LineTooltipItem(tooltipText, const TextStyle(fontSize: 12)));
                        }

                        return tooltips;
                      },
                      tooltipBgColor: const Color(0xFFC0AAAA),
                      tooltipPadding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
                    ),

Thanks in advance for some help

0

There are 0 best solutions below