Scroll interation on xaxis labels

How acheive scroll on xaxis labels.


3 Replies

NK Naveen Kesavaraj Syncfusion Team November 29, 2024 11:41 AM UTC

Hi Dinesh Gummadi,

 

Based on the shared details, we suspect that you need to scroll the x-axis of the SfCartesianChart and you can achieve the mentioned requirement by using the zoomPanBehavior property. Here, you can achieve the horizontal scrolling only for the x-axis alone by enabling the enablePanning or enableMouseWheelZooming properties and by setting the zoomMode property as ZoomMode.x in the ZoomPanBehavior class as shown in the code snippet below.

 

SfCartesianChart(  

    zoomPanBehavior: ZoomPanBehavior(  

      enablePanning: true, 

      zoomMode: ZoomMode.x,  

    ), 

),  

 

Shared the user guide article regarding the ZoomPanBehavior of the SfCartesianChart below for your reference.

 

Zooming and Panning in Flutter Cartesian Charts widget | Syncfusion

 

Additionally, if you need to customize the SfCartesianChart with an attractive scrollbar to track the zoom and pan progress, then you can achieve it using SfRangeSlider and SfRangeSelector widgets. Also shared the blog article for adding the customized scrollbar in SfCartesianChart for your reference.

 

Adding-scrollbar-in-flutter-charts

 

Kindly refer the shared articles to achieve scrolling in the SfCartesianChart and if this is not the expected request, then we request you to share detailed information regarding your use case along with any snapshot or demo. This will help us to understand better and we can able to provide best possible solution from our side.

 

Regards,

Naveen K.




DG dinesh gummadi November 30, 2024 07:14 AM UTC

The interaction works on the graph / chart region itself.

When you try to scroll the x axis lables it doesn't work. How to acheive the same on scrolling  xaxis labels.



NK Naveen Kesavaraj Syncfusion Team December 2, 2024 02:07 PM UTC

Hi Dinesh Gummadi,

 

As per the current implementation of SfCartesianChart, there is no support to scroll both the plot area and x axis labels of the SfCartesianChart directly and this is the current behavior. However, as mentioned in the earlier response, you can able to achieve the similar behavior by using the SfRangeSelector or SfSlider widgets by referring the below shared blog.

 

How to add a scrollbar to Syncfusion Flutter Charts.

 

If you have further queries, please get back to us.

 

Regards,

Naveen K.



Loader.
Up arrow icon