[syncfusion_flutter_charts] Issue with tooltip builder wrapped inside scrollable, ex: SingeChildScrollView #1775
Description
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
