tooltip only shows on const class

[bhattishb92]

Bug description

I get a unique issue in my code, I'm using SfCartesianChart with DateTimeAxis, the TooltipBehavior only works with the const class but when ever I pass some parameter to the class, It stops showing

In my code, SampleLineChart class is working fine but the LineChartScreen do not showing the tooltip

Steps to reproduce

remove the const keyword from the chart class

Code sample

Code sample

```dart GridView.builder( padding: const EdgeInsets.only( left: 10, right: 10) .r, shrinkWrap: true, itemCount: model.analyticsController .graphList.length + 1, physics: const NeverScrollableScrollPhysics(), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( childAspectRatio: 490 / 420, mainAxisSpacing: 20.h, crossAxisSpacing: 20.w, crossAxisCount: 3), itemBuilder: (context, index) { if (index == 0) { // passing the class as const and working return const SampleLineChart(); } return LineChartScreen( graphModel: model.analyticsController .graphList[index - 1], ); }) class SampleLineChart extends StatefulWidget { const SampleLineChart({super.key}); @override State createState() => _SampleLineChartState(); } class _SampleLineChartState extends State { @override Widget build(BuildContext context) { return TheGraph( clicks: sampleChartData, compareClicks: const [], ); } List sampleChartData = [ ChartData(DateTime(2015, 1, 1, 1), 1.13), ChartData(DateTime(2015, 1, 2, 2), 1.12), ChartData(DateTime(2015, 1, 3, 3), 0.0), ChartData(DateTime(2015, 1, 4, 4), 1.12), ChartData(DateTime(2015, 1, 5, 5), 1.1), ChartData(DateTime(2015, 1, 6, 6), 1.12), ChartData(DateTime(2015, 1, 7, 7), 0.0), ChartData(DateTime(2015, 1, 8, 8), 1.12), ChartData(DateTime(2015, 1, 9, 9), 1.16), ChartData(DateTime(2015, 1, 10, 10), 1.1), ]; } class LineChartScreen extends StatefulWidget { final GraphModel graphModel; final int? index; const LineChartScreen({super.key, required this.graphModel, this.index}); @override State createState() => LineChartScreenState(); } class LineChartScreenState extends State { DateTime? startDate; DateTime? endDate; List dateRange = []; List chartData = []; List compareChartData = []; List getClicksList() { List list = []; for (int i = 0; i < dateRange.length; i++) { list.add( ChartData(dateRange[i], (getSameDayClicks(dateRange[i], false)))); } list.sort((a, b) => a.x.compareTo(b.x)); chartData = list; setState(() {}); return list; } List getCompareClicksList() { List list = []; for (int i = 0; i < dateRange.length; i++) { list.add(ChartData(dateRange[i], getSameDayClicks(dateRange[i], true))); } list.sort((a, b) => a.x.compareTo(b.x)); compareChartData = list; setState(() {}); return list; } double getSameDayClicks(DateTime date, bool isCompare) { return (isCompare ? widget.graphModel.compareClicks : widget.graphModel.clicks!)! .where((element) { return element.clickDate == date; }) .length .toDouble(); } void mergeStartAndEndDate() { List clicks = widget.graphModel.clicks!; clicks.sort((a, b) => b.clickDate!.compareTo(a.clickDate!)); DateTime clicksStartDate = clicks[clicks.length - 1].clickDate!; DateTime clicksEndDate = clicks[0].clickDate!; List compareClicks = widget.graphModel.compareClicks!; compareClicks.sort((a, b) => b.clickDate!.compareTo(a.clickDate!)); if (compareClicks.isNotEmpty) { DateTime compareClicksStartDate = compareClicks[compareClicks.length - 1].clickDate!; DateTime compareClicksEndDate = compareClicks[0].clickDate!; if (clicksStartDate.isBefore(compareClicksStartDate)) { startDate = clicksStartDate; } else { startDate = compareClicksStartDate; } if (clicksEndDate.isAfter(compareClicksEndDate)) { endDate = clicksEndDate; } else { endDate = compareClicksEndDate; } } else { startDate = clicksStartDate; endDate = clicksEndDate; } dateRange = List.generate(endDate!.difference(startDate!).inDays.abs() + 1, (index) { return startDate!.add(Duration(days: index)); }); } @override Widget build(BuildContext context) { mergeStartAndEndDate(); getClicksList(); if (widget.graphModel.compareClicks!.isNotEmpty) { getCompareClicksList(); } return DecoratedBox( key: Key(widget.index.toString()), decoration: BoxDecoration( borderRadius: AppConstants.borderRadiusLarge, border: Border.all( color: AppColors.borderColor, ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( child: Container( height: 64.h, decoration: BoxDecoration( color: AppColors.lightBlack.withOpacity(0.05), borderRadius: AppConstants.borderRadiusLarge, border: Border.all( color: AppColors.borderColor, ), ), child: Center( child: Text( widget.graphModel.title!, style: TextStyles.largeText(1.sp), ), ), ), ), Expanded( flex: 7, child: Column( children: [ Padding( padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Total Clicks", style: TextStyles.normalLargeText(1.sp), ), 10.verticalSpace, Text( NumberFormat("#,##,000") .format(widget.graphModel.clicks!.length), style: TextStyles.customTextStyle( fontSize: 20.sp, fontWeight: FontWeight.bold), ), if (compareChartData.isNotEmpty) Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Compare Total Clicks", style: TextStyles.normalLargeText(1.sp), ), 10.verticalSpace, Text( NumberFormat("#,##,000").format( widget.graphModel.compareClicks!.length), style: TextStyles.customTextStyle( fontSize: 20.sp, fontWeight: FontWeight.bold), ), ], ), 10.verticalSpace, Row( children: [ Text( "Over time", style: TextStyles.normalLargeText(1.sp), ), 20.horizontalSpace, Text( startDate != null ? DateFormat("dd MMM yyyy").format(startDate!) : "Not Available", style: TextStyles.customTextStyle( fontSize: 16.sp, fontWeight: FontWeight.bold), ), 20.horizontalSpace, Text( endDate != null ? DateFormat("dd MMM yyyy").format(endDate!) : "Not Available", style: TextStyles.customTextStyle( fontSize: 16.sp, fontWeight: FontWeight.bold), ) ], ), ], ), ), Expanded( child: TheGraph( clicks: chartData, compareClicks: compareChartData, ), ), ], ), ), ], ), ); } } class ChartData { ChartData(this.x, this.y); final DateTime x; final double y; } class TheGraph extends StatelessWidget { final List clicks; final List compareClicks; const TheGraph( {super.key, required this.clicks, required this.compareClicks}); @override Widget build(BuildContext context) { return SfCartesianChart( primaryXAxis: const DateTimeAxis( edgeLabelPlacement: EdgeLabelPlacement.shift, ), tooltipBehavior: TooltipBehavior(enable: true), series: [ LineSeries( name: "Clicks", enableTooltip: true, dataSource: clicks, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y, color: Colors.blue, ), if (compareClicks.isNotEmpty) LineSeries( name: "Compare Clicks", enableTooltip: true, dataSource: compareClicks, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y, color: Colors.red, ), ], ); } } ```

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

https://github.com/user-attachments/assets/cae1a26c-8254-4e21-8f5f-aaca93f7e2c7

Stack Traces

Stack Traces

```dart [Add the Stack Traces here] ```

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

```console [✓] Flutter (Channel stable, 3.22.2, on macOS 14.4.1 23E224 darwin-arm64, locale en-US) • Flutter version 3.22.2 on channel stable at /Users/bhatti/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (3 months ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/bhatti/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.92.2) • VS Code at /Users/bhatti/Documents/Visual Studio Code.app/Contents • Flutter extension version 3.94.0 ```

[Rioverde]

Same issue, up

[umarappscrip]

same issue ( not working when using const class in my case)

[PreethikaSelvam]

Hi All,

We have tried to replicate the reported issue regarding tooltip rendering using your code snippet. Unfortunately, we are not able to reproduce the reported issue. However, we suspect that your widget is dynamically rebuilding. According to the current implementation, when the chart widget rebuilds dynamically, the tooltip has been disabled, resulting in it being hidden; this is a currently behavior. We kindly ask you to verify this in your application.

If this is not your case, we kindly request you to try to replicate the reported issue in the below attached test sample and revert us so that it will help us assist you in a better way.

Output:

Regards,

Preethika Selvam. gh2042.zip

[bhattishb92]

@PreethikaSelvam Thanks alot. Yes the issue is my UI is continuously rebuilding (I didn't find out why), but I replace Obx Builder with GetBuilder and now everything works absolutely fine. Again thanks