Zoom and Annotation not working together on mobile

[Dhananjay Ghongane]

We have zoom enabled on cartesian chart with below settings.

```

    _zoomPanBehavior = ZoomPanBehavior(

        enablePinching: true,

        zoomMode: widget.data.type == 'bar' ? ZoomMode.y : ZoomMode.x,

        enablePanning: true,

        enableMouseWheelZooming: kIsWeb,

        enableSelectionZooming: true);

```

Annotations are created like:

```

    CartesianChartAnnotation annotation = CartesianChartAnnotation(

        region: AnnotationRegion.plotArea,

        coordinateUnit: coordinateUnit,

        x: (_xAxisType == 'datetime' || _xAxisType == 'datetimecategory')

            ? getDateTimeFromNanoSec(annotationProp.x)

            : annotationProp.x,

        y: (_yAxisType == 'datetime' || _yAxisType == 'datetimecategory')

            ? getDateTimeFromNanoSec(annotationProp.y)

            : annotationProp.y,

        widget: HtmlWidget(

          """

          ${annotationProp.htmlText}

          """,

          customStylesBuilder: (element) {

            return {'text-align': 'center'};

          },

          onTapUrl: (url) async {

            return await launch(url);

          },

        ));

```

This works perfectly fine on Desktop.

But it hangs on mobile after first pinch. (specifically tested on chrome on mobile)

Could you help on this ?

Regards,
Dhananjay.  

[Preethika Selvam]

Hi Dhananjay Ghongane,

We tried to replicate the reported issue regarding ‘zooming and annotation not working together on the Chrome in mobile platform’ at our end. Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure on what scenario the issue is replicating. So, 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.

Regards,

Preethika Selvam.

Attachment: fr185926_1a9c6b8c.zip

[Dhananjay Ghongane]

Hello Preethika,

Attached modified code.

Also here is my flutter doctor  command output.

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.10.5, on macOS 11.7.6 20G1231 darwin-x64, locale en-GB)

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)

[✓] Chrome - develop for the web

[✓] Android Studio (version 2021.3)

[✓] VS Code (version 1.84.2)

[✓] Connected device (3 available)            

[✓] Network resources


I changed syncfusion version to match with our current version, Unfortunately we cant upgrade to latest because of other dependencies.

- Let me take 1 step back: Its not problem of annotation Its because of multiple line serises in single chart and then select zoom on it.

- Above code works fine on desktop web, IOS simulator (iphone 13). But its hangs in select zoom on mobile browser. (Samsung S23/ Iphone 13)

- To test it you have to host it and then  test on actual mobile device.

Attached screenshot of hang after select zoom. After hang we have to refresh site and no other option.

 

Regards,
Dhananjay.

Attachment: fr185926_1a9c6b8c_v2_2a5c5abc.zip

[Dhananjay Ghongane]

Hello Preethika,

Let me know if you need hosting site URL to see issue on mobile.

Regards,
Dhananjay.

[Preethika Selvam]

Hi Dhananjay Ghongane,

We were able to replicate the reported issue using the sample you provided. However, we were unable to reproduce the issue with the simple sample. Currently, we are investigating the issue and will provide further details within two business days, by January 8, 2024. We appreciate your patience until then.

Regards,

Preethika Selvam.

[Preethika Selvam]

Hi Dhananjay Ghongane,

We apologize for the miscommunication; we have checked the reported issue with the sample provided by you in Chrome on mobile. Unfortunately, we are not able to replicate the reported issue in release mode, please try this case in release mode and kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Preethika Selvam.

[Dhananjay Ghongane]

Can i give you hosted URL for testing it ?

Its getting reproduced easily, with above code.

[Dhananjay Ghongane]

Let me host it in release mode and check. Will send you URL.

Regards,
Dhananjay

[Dhananjay Ghongane]

buildCommand:

flutter build web -t lib/main.dart --release

Hosting site:

https://chartart-dev--lmnopdfgh-qi47q3it.web.app/#/

Could you confirm if issue is there ? 

I can reproduce it SAMSUNG s23 /  chrome browser

[Preethika Selvam]

Hi Dhananjay Ghongane,

 

Sorry for the delay. We have checked the link provided in your previous update, but it is not working. We kindly request you to share a new link so that we can assist you more effectively.

 

Regards,

Preethika Selvam.

[Simon Iversen]

Hello,

I am experiencing this issue using syncfusion_flutter_charts v25.1.39+1. I have attached a minimal reproducible example. I ran this example on an iPhone 11. 

See the attached video, when I zoom in/out by pinching the screen, the blue chart data moves accordingly, but the red annotation does not move with the zoom.

https://www.youtube.com/shorts/91SGOpv-g3g

Thanks in advance

Simon

Attachment: syncfusion_annotaion_chart_zoom_bug_b9eb03ed.zip

[Preethika Selvam]

Hi Simon,

We can replicate the reported issue regarding the annotation widget position not updating while performing zooming. This has been fixed and included in our upcoming weekly release following the SP Release which is scheduled for the second week of May. We will update you here once the release is rolled out and we appreciate your patience until then.

Regards,

Preethika Selvam.

[Simon Iversen]

Hello Preethika,

I appreciate the quick reply and looking forward to the release with the fix.

Do you know any hacks/workarounds I can use in the meantime? To make the annotation move with the zoom? I don't need a complete solution, but some hints/tips to point me in the right direction would be nice.

Thanks in advance

Best regards,

Simon

[Preethika Selvam]

Hi Simon,

To resolve this issue, we suggest you to call a setState inside the onZooming, onZoomStart and onZoomEnd callback to update the annotation widget position while performing zooming. We have shared a code snippet and UG link for your reference.

UG Link: 

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onzooming

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onzoomstart

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onzoomend

Code snippet:

 child: SfCartesianChart(

          onZooming: (ZoomPanArgs args) {

            setState(() {});

          },

          onZoomStart: (ZoomPanArgs args) {

            setState(() {});

          },

          onZoomEnd: (ZoomPanArgs args) {

            setState(() {});

          },

Please let us know if you need any further assistance.

Regards,

Preethika Selvam

Attachment: 185926_64712dc4.zip

[Simon Iversen]

Hello Preethika,

Thanks you so much for the prompt reply and the workaround suggestion! 

I will test the attached example later on. It seems straightforward, but I will reach out if I encounter any issues.

Best regards,

Simon

[Lokesh Palani]

Hi Simon,

Thanks for your update. We will look forward to getting an update from you.

Regards,

Lokesh P.

[Lokesh Palani]

 Hi Simon,

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

 Version link:  https://pub.dev/packages/syncfusion_flutter_charts/versions/25.2.3

Root cause: Missed to include the annotation position update while zooming and panning the chart.

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

Regards,

Lokesh P.