Hi,
I'm currently facing a problem with scrolling in my Flutter app, and I hope someone can help me resolve this issue. I have a ListView with multiple SfCartesianCharts, and I'm encountering an issue where the scrolling doesn't work correctly when the user's finger starts on a chart or the scroll wheel event starts over the graph.
Here's the scenario:
The user's finger starts on a chart or the scroll wheel event starts over the graph.
The user attempts to scroll the page.
The page doesn't scroll as expected (A video has been attached to show the behavior).
I would like the page to scroll normally, regardless of whether the user's finger starts on a chart or the scroll wheel event is initiated over the graph. I have tried various solutions, but nothing seems to work so far.
I have zoom pan disabled. The graphs do have
Any ideas?
I am using MacOS 13.3.1
Here is an example of one of the charts. It has ZoomPanBehavior x only, Trackball enabled with custom builder and no animations.
Attachment: output.mp4_48412f6.zip
Hi Daniel,
We are validating your query at our end. We will try it feasible workaround and let you know one business day on April 14, 2023. We appreciate your patience until then.
Regards,
Lokesh.
Hi Daniel,
We have checked your code snippet and you can achieve your requirement with the help of the IgnorePointer widget, which ignores user interaction with the GestureDetector widget. Additionally, by setting the behavior property to HitTextBehavior.opaque in the GestureDetector widget, you can achieve scrolling and display the trackballBehavior in a list view with multiple charts. We have shared a code snippet and sample for your reference.
Code snippet:
late TrackballBehavior _trackballBehaviorOne;
@override void initState() { _trackballBehaviorOne = TrackballBehavior( enable: true, activationMode: ActivationMode.singleTap); super.initState(); }
GestureDetector( behavior: HitTestBehavior.opaque, onTapDown: (TapDownDetails details) { _showTrackballOne( details.globalPosition.dx, details.globalPosition.dy); }, child: IgnorePointer( ignoring: true, child: SfCartesianChart( trackballBehavior: _trackballBehaviorOne, ) ) )
void _showTrackballOne(double x, double y) { _trackballBehaviorOne.show(x, y, 'pixel'); } |
Note: When the ignoring property is set to true, trackballBehavior will be activated upon tapping on the chart, while other user interactions will be disabled.
Output Screenshot:
Regards,
Lokesh.
Hello,
Thanks Lokesh, that is very close to what I am after.
Is there a way to only wrap the chart? Doing this removes the ability to toggle the legend and the trackball is activated if the user clicks anywhere on the chart even the axes etc.
Thans
Dan
Hi Daniel,
When using the IgnorePointer widget, chart interactions will not work. So, we have enabled the trackballBehavior by using the show method. If we remove the ignore pointer, chart only takes the touch interactions while hover or tap on chart area. This is the behavior of chart.
Regards,
Lokesh.
Hi Lokesh I have facing same problem.
I am not abel to scrool vertically multiple graph . and i used Drilled Chart as well use in every graph . When i remove ZoomPan Behaviour property in Chart , Chart is proper scrolle vertically but horizonatal scroll is not working .
Isend you my scenario via video. please check
hi Daniel
please remove this if you dont use zoom then your scrooling work proper.
Hi nitish,
Thank you for the suggestion. Please let us know if you require any further assistance.
Regards,
Lokesh.
HI Lokesh i add question https://www.syncfusion.com/forums/181825/how-to-scroll-graph-data-horizontally-without-using-zoompanbehavior-properties?reply=SFjdyc
please help me out .
Hi,
We have provided an answer to the query above. Please check the answered link below. Please get back to us if you need any further assistance.
Link,
Regards,
Lokesh.
hi Lokesh
you dont understand what is problem in this chart.
Scenario is that,
=> First i have multiple chart in one page with single child scroll view.
=> All chart have their own Drilled Chart .
=> In Every Chart i have scroll horizontally when i tap to scrool on Left side its scrool very well with using property of Enabel Panning .
=> But I also want to scrooled vertically all chart when touch on evry column graph data its not scrolling.
Note (That Single child scroll view provide me to scrool vertically all chart)
=>I mention this in video.
please first understand question than reply.
Regards Nitish
Attachment: video_data_159dca00.zip
Hi nithish,
We are validating your query at our end and we will update further details one business day on April 24, 2023. We appreciate your patience until then.
Regards,
Lokesh.
Hi Lokesh
Any update regarding this question?
Hi Nitish,
You can achieve your requirement with the help of zoomMode and enablePanning property in the ZoomPanBehavior, here when setting zoomMode to ZoomMode.x and enabling the panning by enablePanning property it allows you to pan the chart in the horizontal direction only. So, now you can scroll the view vertically with multiple charts, and also the drilled-down and trackball also work fine. We have prepared the sample and shared it below for your reference.
In another query you have asked to pan the chart without enabling zoomPanBehavior for that, you can able to pan the chart by using the panToDirection public method of ZoomPanBehavior and setting the enablePinching and enablePanning properties to false. We have shared the related UG and online samples below for your reference.
online Sample: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/zooming-and-panning/zooming-with-custom-buttons
Regards,
Yuvaraj.
Hi
Yuvaraj
Thanks for answer but is not that i want.
I mention video also please watch than check .
I have multiple chart with diffrent diffrent view in one screen . When i touch on Column Graph data that time i want scroll vertically whole screen view that not working.
I add sample code
Attachment: chartdemo_df205c7a.zip
Hi nitish,
We have checked your sample. To enable vertical scrolling in the chart, you can enable ZoomMode.x in the zoomPanBehavior property. This will allow you to pan the chart horizontally only. Please inform us if you require any additional assistance.
Regards,
Lokesh.
Hi Lokesh
Thanks For your answer its working fine right now in Column Seriese.
If any query will come from Chart related i update my question.
Sincerly Thanks
Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.
Hello,
I have tried the gesture detector and ignore pointer but it removes all functionality of legends etc and is not worth it.
Is there anyway to use the xaxis as a panning “slider” so swipe across the xaxis will pan the chart instead of allowing the user to touch the chart and then pan.
The aim being to make the chart ignore all panning behaviours except for the axes interaction. This should remove my issue of the user constantly getting pauses due to wrongful gesture interaction .
I was able to link the chart to a slider but that’s not ideal, I would like to just swipe the finger horizontally along the x axis labels instead.
Any ideas?
Hi Dan,
Currently, we don’t have support for the axis scrollbar support to pan the chart without the chart area interaction. However, we have considered your requirement as a new feature and logged a feature request for it in our feedback portal.
We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.
Feedback, https://www.syncfusion.com/feedback/43312
Regards,
Yuvaraj.
Hi,
is there a way to allow vertical scrolling of the screen (the Line Chart inside a ScrollView) while having panning pinching and trackball with long-press enabled?
I just need panning and pinching on the X-axis, so the vertical gesture should not disturb the other controls.
Hi Matthias,
We have considered this as bug regarding “Scrolling not working when Trackball is enabled in the chart”. This issue is scheduled to be fixed in our weekly patch release on July 23, 2024. We will update you here once the release is rolled out and we appreciate your patience until then.
Root cause:
In the SfCartesianChart widget, the
VerticalDragGestureRecognizer is used to handle vertical panning, and it
absorbs the interactions in the SfCircularChart, causing the
SingleChildScrollView to scroll vertically.
Regards,
Lokesh P.
thanks for the update great to hear :)
Hi Matthias,
We have rewritten the zooming behavior architecture in our charts to double the performance. During these flow changes, we utilized ScaleGesture and Drag gestures to handle pinching and panning. However, when we wrapped the chart widgets inside a ScrollView, Charts drag gestures took priority over parent widget, resulting in charts interactions occurring while attempting to scroll the parent widget even trackball activation mode is LongPress.
Currently we are working on this, and we will include this in our package after the service pack release since we have the service pack release in this week.
Regards,
Lokesh P.
Hi Matthias,
The reported issue has been fixed and rolled out in our weekly patch release. To avoid this issue we request you upgrade the syncfusion_flutter_chart package to the latest version below.
Root cause: In the SfCartesianChart widget, the VerticalDragGestureRecognizer is used to handle vertical panning, and it absorbs the interactions in the SfCartesianChart, causing the scrolling issue while scrolling vertically.
Package: https://pub.dev/packages/syncfusion_flutter_charts/versions/26.2.5+1
Regards,
Lavanya A.
Hi,
thanks a lot, works pretty well :)