We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Chart resets zoom when state is updated

Hello,

I've made a very simple chart with a DateTimeAxis as the primaryXAxis and a NumericAxis as the primaryYAxis.

The series i'm using is the StepLineSeries.

I've also enabled zooming in this chart so i can perform zoom and panning actions.

The chart lives inside a stateful widget.


The problem occurs when i have zoomed into the chart a bit and then update the state (setState), the zoom resets to its original state. Is it possible to keep the zoom/pan position when the state of the widget is updated?


Regards Martin


5 Replies 1 reply marked as answer

NR Natrayan Ramalingam Syncfusion Team October 27, 2022 02:31 AM

Hi @Martin,


Greetings from Syncfusion.


We tried to replicate the reported issue regarding zooming into the chart a bit and then updating the state, the zoom resets to its original state at our end. Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure in what scenario the issue is replicating. So, we kindly request you to try to replicate the reported issue in the below-attached sample and revert us so that it will help us assist you in a better way.


Regards,

Natrayan


Attachment: f178461_b2bbd5cc.zip


MP Martin Pyk Pyk Pettersen October 27, 2022 02:54 AM

Hello and thanks for replying.

I tested your code and you are correct. The zoom does not reset on widget state update.


I see now that I wasn't accurate enough in my description of my issue.

In the code you sent to me, add these properties to the DateTimeAxis:

visibleMinimum: chartData[3].x,
visibleMaximum: chartData[chartData.length - 1].x

Now, attempt to pan or zoom in the chart and then set the state (press the "Show" button). You will see that the chart resets its zooming/panning values to its originale state.



NR Natrayan Ramalingam Syncfusion Team October 28, 2022 04:56 AM

Hi @Martin,


Greetings from Syncfusion.


We have validated your query at our end, and we would like to let you know if the visible minimum and maximum are set for the chart and if its redrawn after zooming on the chart using setState, the chart will reset to the values set in visible minimum and maximum in axis. This is the current default behavior.


However, you can achieve your requirement regarding ‘to maintain the zoom/pan position when the state of the widget is updated’ using a workaround with the help of the onActualRangeChanged callback and setting the zoomed position value to the visibleMinimum and visibleMaximum property and setting the animationDuration as 0 in series. Please refer to the following code snippet.


SfCartesianChart(

            onActualRangeChanged: (args) {

              if (args.orientation == AxisOrientation.horizontal) {

                vis_min = DateTime.fromMillisecondsSinceEpoch(args.visibleMin);

                vis_max = DateTime.fromMillisecondsSinceEpoch(args.visibleMax);

              }

            },

            primaryXAxis: DateTimeAxis(

              visibleMinimum: vis_min ?? chartData[3].x,

              visibleMaximum: vis_max ?? chartData[chartData.length - 1].x,

            ),

)


We have also created a simple and achieved the same and attached it below for your reference. Please check the attached sample and get back to us if you require further assistance.


Regards,

Natrayan


Attachment: f178461_f1cb8d32.zip

Marked as answer

MP Martin Pyk Pyk Pettersen replied to Natrayan Ramalingam October 31, 2022 01:38 AM

Thanks, that worked perfectly!



SK Sriram Kiran Senthilkumar Syncfusion Team October 31, 2022 02:27 AM

Hi Martin,


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


Regards,

Sriram Kiran


Loader.
Live Chat Icon For mobile
Up arrow icon