zooming to a date range and y-axis updating

I'm having trouble with zooming to a range and then being able to pan back.

What I want to do is be able to set some buttons like 7days, 30 days, 3months, 6months, 1 year, all.

When clicking one it should just show the data for that range and adjust the y-axis min and max for whatever data is visible.

I then want to be able to pan back through the data and the y-axis adjust as needs be. What I did was very glitchy with the y-axis trying to update constantly and just was just horrible. 

I have been able to get it to cut the data to those points which looks fine, but then I can't pan back. it litrally just cuts the data to that range. 

Has anyone implemented anything like this and how did you do it?


3 Replies 1 reply marked as answer

MR Mugunthan Ramalingam Syncfusion Team June 16, 2025 01:35 PM UTC

Hi martyn mascord,


We have checked the mentioned scenario in a simple sample, including with different intervals such as 7 days, 30 days, 3 months, and more. We were able to achieve the expected behavior using the visibleMinimum and visibleMaximum properties. Please check the attached sample for your reference.

 

However, if the attached sample does not meet your requirement, we kindly request you to update it with your code changes and share additional details regarding your use case. This will help us understand your scenario more clearly and assist you more effectively.

 

Note: If the Y-axis range is not updating based on the current visible data points, we recommend using the anchorToVisibleRangePoints: true property on the primaryYAxis.This will update the Y-axis range according to the visible data points. Please note that this property works only when the chart’s zoomPanBehavior has zoomMode set to 'x'.


We have shared snippet code and screenshot for your reference.

 

Code snippet:

SfCartesianChart(

   zoomPanBehavior: ZoomPanBehavior(

     zoomMode: ZoomMode.x,

   ),

   primaryYAxis: NumericAxis(anchorRangeToVisiblePoints:  true),

   .....

),

 

 

UG links

anchorToVisibleRangePoints: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#auto-range-calculation

zoomPanBehavior: https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan

 

If you have any further queries, please get back to us. We are always happy to assist you.

 

 

Regards,

Mugunthan.



Attachment: fr_196985_1da11260.zip

Marked as answer

MM martyn mascord June 17, 2025 08:24 AM UTC

I think I've sorted it cheers



MR Mugunthan Ramalingam Syncfusion Team June 17, 2025 12:37 PM UTC

Hi martyn mascord,

 

We are happy to hear that the solution was found by yourself. If you have any further queries, please get back to us. We are always happy to assist you.

 

Regards,

Mugunthan.


Loader.
Up arrow icon