syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.55k stars 756 forks source link

Issue with Tooltip Behavior on mobile click. #1979

Open saprahits opened 2 months ago

saprahits commented 2 months ago

Bug description

There is an issue with the TooltipBehavior on click. When tested on the mobile app, the chart line click area is too small, making it difficult to open the tooltip. As shown in the attached video from the simulator, it is very hard to click and open. When trying on a mobile device, it's even more challenging to open with a fingerprint.

Could you please look into this issue?

https://github.com/user-attachments/assets/34090051-152f-4282-bf49-d0376bf604f7

Steps to reproduce

  1. Create a default SfCartesianChart example.
  2. Test clicking on the chart in the mobile app with TooltipBehavior enabled.

Code sample

Code sample ```dart SfCartesianChart( key: ValueKey(widget.selectedTimeFrame.value), plotAreaBorderWidth: 0, margin: EdgeInsets.zero, enableAxisAnimation: true, legend: const Legend(isVisible: false), primaryXAxis: CategoryAxis( majorGridLines: const MajorGridLines(width: 0), isInversed: widget.isRTL, isVisible: false, labelPlacement: LabelPlacement.onTicks, ), primaryYAxis: NumericAxis( minimum: 0, maximum: 40, interval: 5, isVisible: true, labelStyle: AppTheme.of(context).primaryRegularTextStyle.merge( TextStyle(fontSize: 10.sp, color: AppTheme.of(context).colors.hintText), ), opposedPosition: widget.isRTL, axisLine: const AxisLine(width: 0), edgeLabelPlacement: EdgeLabelPlacement.shift, majorTickLines: const MajorTickLines(size: 0), ), series: _getGradientAreaSeries(), tooltipBehavior: TooltipBehavior( enable: true, color: Colors.black, borderColor: appTheme.colors.primary, borderWidth: 2, textStyle: const TextStyle(color: Colors.white), builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) { return Container( padding: EdgeInsets.all(8.w), decoration: BoxDecoration( color: appTheme.colors.primary, borderRadius: BorderRadius.circular(4.r), ), child: Column( mainAxisSize: MainAxisSize.min, children: [ Text( selectedRate.keys.first, style: appTheme.primaryRegularTextStyle.merge( TextStyle(color: appTheme.colors.primaryText), ), ), Text( data.y.toString(), style: appTheme.primarySemiTitle.merge( TextStyle(color: appTheme.colors.primaryText), ), ), ], ), ); }, ), ) ```

Screenshots or Video

Screenshots / Video demonstration https://github.com/user-attachments/assets/34090051-152f-4282-bf49-d0376bf604f7

Stack Traces

No Stack Traces

On which target platforms have you observed this bug?

iOS

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-GB) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2024.1) [✓] VS Code (version 1.90.2) [✓] Connected device (6 available) [✓] Network resources ```
ghost commented 1 month ago

Hi @saprahits,

Currently, the smooth tooltip touch interaction works based on marker size, with tooltip touch padding adjusted to ensure they are large enough for easy interaction with the exact data points. For continuous series, touch interaction is improved by considering the distance between the touch position and the nearest data point. This ensures the tooltip appears nearer to the closest data point where the touch interaction occurred.

We have considered your request as an improvement and logged a feature request for Improve the smooth tooltip touch interaction support for continuous series in charts in our feedback portal, and it is uncertain. This feature will be available in one of our upcoming releases. We will notify you when this feature is implemented. We appreciate your patience until then. If you have any additional specifications or suggestions for this feature request, please feel free to leave them in the comments section of the feedback link. This will help us understand how you would like to use it and how we can improve it.

Feedback Report link - https://www.syncfusion.com/feedback/59593

Regards, Lokesh P.