How to scroll graph data horizontally without using ZoomPanBehavior properties (enablePanning)

[nitish chauhan]

I want to scroll graph data horizontally.

 Scenario is ( When i use

zoomPanBehavior: ZoomPanBehavior(
  //enablePinching: true,
  zoomMode: ZoomMode.y,
  enablePanning: true,
),

that time scrolling working but vertical scrolling is close .

when i comment this code vertical scrolling is working but horizontal scrolling is not working.

) 

[Lokesh Palani]

Hi nitish,

You can achieve your requirement with the help of the ZoomMode property. In the ZoomMode property, you can achieve scrolling in the horizontal direction by setting ZoomMode.x and in the vertical direction by setting ZoomMode.y. By setting ZoomMode.xy, you can achieve scrolling in both horizontal and vertical directions. Please let us know if you need any further assistance.

Regards,

Lokesh.

[nitish chauhan]

 Scrolling issues with multiple SfCartesianCharts in a Flutter ListView

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 SingleChildScrollView 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:

Note( I use Drilled Chart also in this code . So when I use IgnorePointer this click event was gone.)

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.

Any ideas?

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 SingleChildScrollView 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:

Note( I use Drilled Chart also in this code . So when I use IgnorePointer this click event was gone.)

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.

Any ideas?

Attachment: video_data_ed041be3.zip

[Lokesh Palani]

Hi nitish,

When using the IgnorePointer widget, chart interactions will not work when you tap on the chart. If you remove the IgnorePointer widget, the chart will only respond to touch interactions when hovered or tapped on in the chart area. This is the behavior of the chart. Please let us know if you need any further assistance.

Regards,

Lokesh.

[nitish chauhan]

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 scrool horizontally when i tap to scroll on Left side its scroll very well with using property of Enabel Panning​ .

=> But I also want to scrolled vertically all chart when touch on evry column graph data its not scrooling.

Note (That Single child scroll view provide me to scroll vertically all chart)​

=>I mention this in video.

please first understand question than reply.

Regards Nitish

Attachment: video_data_75c6d481.zip

[Lokesh Palani]

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.

[nitish chauhan]

Hi Lokesh

Any update regarding this question?

[Yuvaraj Gajaraj]

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.

Also, 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.

UG: https://help.syncfusion.com/flutter/cartesian-charts/methods#pantodirection-method-in-zoompanbehavior

online Sample: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/zooming-and-panning/zooming-with-custom-buttons

Regards,

Yuvaraj.

Attachment: f181825_18ffa44.zip

[nitish chauhan]

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_ccc84d82.zip

[Lokesh Palani]

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.

[nitish chauhan]

hi 

Lokesh

  I want not in chart vertical zoom.

      I want scroll on touch the graph scroll like listview and Single child scroll view that scroll all chart in single screen.

Attachment: video_data_7e4c2727.zip

[Lokesh Palani]

Hi nitish,

We have checked your query to achieve scrolling vertically in the chart. To do this, please set ZoomMode.x in the zoomPanBehavior property. We have updated your sample code accordingly to satisfy your requirement and have attached it below. Please inform us if you require any additional assistance.

Code snippet:

SfCartesianChart(

      zoomPanBehavior: ZoomPanBehavior(

        zoomMode: ZoomMode.x,

        enablePanning: true,

      ),

Regards,

Lokesh.

Attachment: chartdemo_df205c7a_e6cfff80.zip

[nitish chauhan]

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

[Yuvaraj Gajaraj]

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.