Chart resets zoom when state is updated

[Martin Pyk Pyk Pettersen]

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

[Natrayan Ramalingam]

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

[Martin Pyk Pyk Pettersen]

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.

[Natrayan Ramalingam]

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

[Martin Pyk Pyk Pettersen]

Thanks, that worked perfectly!

[Sriram Kiran Senthilkumar]

Hi Martin,

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

Regards,

Sriram Kiran