[syncfusion_flutter_charts] Issue with tooltip builder wrapped inside scrollable, ex: SingeChildScrollView

[bismarabia]

Describe the issue:

Reference the example of this link default_doughnut_chart.dart

And by modifying the tooltip to use custom widget builder

Since my text is long and multilines, I wrapped the widget inside scrollable widget, ex: SingleChildScrollView

/// Render the default doughnut chart.
class DoughnutDefault extends StatefulWidget {
  /// Creates the default doughnut chart.
  const DoughnutDefault({super.key});

  @override
  _DoughnutDefaultState createState() => _DoughnutDefaultState();
}

/// State class of doughnut chart.
class _DoughnutDefaultState extends State<DoughnutDefault> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _buildDefaultDoughnutChart();
  }

  /// Return the circular chart with default doughnut series.
  SfCircularChart _buildDefaultDoughnutChart() {
    return SfCircularChart(
      title: const ChartTitle(text: false ? '' : 'Composition of ocean water'),
      legend: const Legend(isVisible: !false, overflowMode: LegendItemOverflowMode.wrap),
      series: _getDefaultDoughnutSeries(),
      tooltipBehavior: TooltipBehavior(
        enable: true,
        color: Colors.black87,
        tooltipPosition: TooltipPosition.pointer,
        builder: (data, point, series, pointIndex, seriesIndex) {
          return SingleChildScrollView(
            child: Text(
              [
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
                "${point.x}: ${point.y}%",
              ].join("\n"),
              style: const TextStyle(color: Colors.green),
            ),
          );
        },
      ),
    );
  }

  /// Returns the doughnut series which need to be render.
  List<DoughnutSeries<ChartSampleData, String>> _getDefaultDoughnutSeries() {
    return <DoughnutSeries<ChartSampleData, String>>[
      DoughnutSeries<ChartSampleData, String>(
          explode: true,
          dataSource: <ChartSampleData>[
            ChartSampleData(x: 'Chlorine', y: 55, text: '55%'),
            ChartSampleData(x: 'Sodium', y: 31, text: '31%'),
            ChartSampleData(x: 'Magnesium', y: 7.7, text: '7.7%'),
            ChartSampleData(x: 'Sulfur', y: 3.7, text: '3.7%'),
            ChartSampleData(x: 'Calcium', y: 1.2, text: '1.2%'),
            ChartSampleData(x: 'Others', y: 1.4, text: '1.4%'),
          ],
          xValueMapper: (ChartSampleData data, _) => data.x as String,
          yValueMapper: (ChartSampleData data, _) => data.y,
          dataLabelMapper: (ChartSampleData data, _) => data.text,
          dataLabelSettings: const DataLabelSettings(isVisible: true))
    ];
  }
}

Expected results:

After clicking on a serie, the tooltip shows up and disappear after the given duration

Actual results:

The tooltip container disappears after few seconds, but the inside text remains on the screen.

Demo Video

[LokeshPalani]

Hi @bismarabia,

We can reproduce the reported issue regarding the ‘Tooltip builder widget not disappearing when the tooltip gets hidden’ at our end. We will fix and include this issue in our upcoming weekly patch release, which is expected to be rolled out on April 16, 2024. We will notify you once it has been rolled out. We appreciate your patience until then.

Regards, Lokesh P.

[PreethikaSelvam]

Hi @bismarabia,

Sorry for the inconvenience. We are facing complexity to fix the issue and cannot include the fix in today’s weekly patch. We are working on this issue with high priority and will include the issue fix in our upcoming weekly patch release it would be expected to be rolled out on 23 April 2024. We will let you know once the release has been rolled out, and we appreciate your patience until then.

Regards,

Preethika Selvam.

[LokeshPalani]

Hi @bismarabia,

We would like to let you know that the reported issue is fixed and rolled out in our patch release. We kindly request you to upgrade the syncfusion_flutter_charts package to the latest version below.

Version: https://pub.dev/packages/syncfusion_flutter_charts/versions/25.1.41+2

Root cause: We have directly used context.paintchild to paint the child, but this approach does not scale appropriately for scrollable widgets.

If you have any further queries, please feel free to reach out to us.

Regards, Lokesh P.

[bismarabia]

Hi @LokeshPalani I can confirm that the issue in fixed, thank you 👍