Sync Scrolling And Zoom Not Working

[The43Joker]

Hi 

When updating to the latest version of the charts package the function of having multiple charts sync scroll and zoom does not work anymore any reason for this?

onZoomEnd: (args) {

          if (args.axis!.name == 'primaryXAxis') {

            zoomP1X = args

                .currentZoomPosition; // Storing the zoomPosition and the zoomFactor

            zoomF1X = args.currentZoomFactor; // of the first chart.

            // Updating zoomFactor and zoomPosition for second chart by using axis controller.

            axis2X!.zoomPosition = zoomP1X;

            axis2X!.zoomFactor = zoomF1X;

            axis3X!.zoomPosition = zoomP1X;

            axis3X!.zoomFactor = zoomF1X;

          }

        },

[Thilip Chandru Soundraraj]

Hi Werner,

We have published a blog and Knowledge Base article on synchronizing multiple charts with scrolling and zooming functionality. Please refer to these resources to adjust the sample according to your needs.

Blog : Easily Synchronize Multiple Charts in Your Flutter App Like a Pro (syncfusion.com)

Knowledge base : https://support.syncfusion.com/kb/article/9939

Regards,

Thilip Chandru.

[The43Joker]

that is exactly the same thing i am using but instead of on zooming i am using onzoomend, once again it does not work with the new version for some reason

here is an example of 1 of the full charts

Widget mixedTemp(

    List<FastLineSeries<Chart, DateTime>> data,

    bool showLabel,

  ) {

    return SizedBox(

      width: double.infinity,

      child: SfCartesianChart(

        legend: const Legend(

          position: LegendPosition.top,

          height: '20%',

          isVisible: true,

          textStyle: TextStyle(

            fontSize: 10,

          ),

        ),

        plotAreaBackgroundColor: Theme.of(context).brightness == Brightness.dark

            ? Colors.grey[900]

            : null,

        primaryXAxis: DateTimeAxis(

          autoScrollingDelta: zoomDays,

          autoScrollingDeltaType: DateTimeIntervalType.days,

          onRendererCreated: (DateTimeAxisController c) {

            axis1X = c;

          },

          initialZoomFactor: zoomF1X,

          initialZoomPosition: zoomP1X,

          name: 'primaryXAxis',

          labelPosition: ChartDataLabelPosition.inside,

          labelStyle: showLabel

              ? null

              : const TextStyle(color: Colors.transparent, fontSize: 1),

          dateFormat: DateFormat('dd MMM yyyy HH:mm'),

          minimum: startCharts,

          maximum: DateTime.now().add(const Duration(days: 7)),

          labelIntersectAction: AxisLabelIntersectAction.hide,

          majorGridLines: const MajorGridLines(width: 1),

        ),

        primaryYAxis: NumericAxis(

          name: 'primaryYAxis',

          interval: 0.5,

          minimum: min,

          maximum: max,

          anchorRangeToVisiblePoints: true,

          axisLine: const AxisLine(width: 0),

          majorGridLines: const MajorGridLines(width: 1, dashArray: [400, 1]),

          majorTickLines: const MajorTickLines(color: Colors.black),

        ),

        series: data,

        trackballBehavior: trackBall1,

        zoomPanBehavior: ZoomPanBehavior(

          enableMouseWheelZooming: true,

          enablePanning: true,

          enableSelectionZooming: true,

          enableDoubleTapZooming: true,

          zoomMode: ZoomMode.x,

        ),

        onZoomEnd: (args) {

          if (args.axis!.name == 'primaryXAxis') {

            zoomP1X = args

                .currentZoomPosition; // Storing the zoomPosition and the zoomFactor

            zoomF1X = args.currentZoomFactor; // of the first chart.

            // Updating zoomFactor and zoomPosition for second chart by using axis controller.

            axis2X!.zoomPosition = zoomP1X;

            axis2X!.zoomFactor = zoomF1X;

            axis3X!.zoomPosition = zoomP1X;

            axis3X!.zoomFactor = zoomF1X;

          }

        },

      ),

    );

  }

[Thilip Chandru Soundraraj]

Hi Werner,

 

We have analyzed your code snippet and you have used onZoomEnd callback which will trigger after zooming action is completed. Kindly refer to this User guide for more information.

UG link: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onzoomend

 

And also we tried to replicate the reported issue regarding scrolling and zooming synchronization  at our end. Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure on what scenario the issue is replicating. So, we kindly request you to try to replicate  the reported issue in the below attached test sample and revert us so that it will help us assist you in a better way.

 

Regards,

Thilip Chandru.

Attachment: fm_194701_(2)_b9456c4.zip

[The43Joker]

Hello 

Just add autoScrollingDelta: 2, and it will break completely, and this is something that i do need to make my charts function correctly

[Thilip Chandru Soundraraj]

Hi The43Joker,

 

To synchronize zooming, panning and auto-scrolling delta across multiple charts are achieved using zoomPanBehavior. Each chart is controlled by a DateTimeAxisController that manages the zoom factor and position of the primary X-axis. The zoomPanBehavior enables panning, pinching, double tap zooming, and selection zooming, all restricted to the X-axis. Synchronization is achieved by updating the zoom factor and position across all charts whenever one chart is zoomed or panned. This is handled with onZoomEnd callbacks based on your requirement.

 

Additionally, the autoScrollingDelta is dynamically adjusted via a set of buttons, allowing the user to change the auto-scrolling interval for the X-axis, effectively controlling how the charts scroll through data over specific time intervals. The use of GlobalKey ensures that each chart's state can be accessed and manipulated, maintaining synchronized behavior across all charts. We have shared a sample for your reference. You can modify the sample based on your needs.

 

Regards,

Thilip Chandru.

Attachment: fm_194701_(3)_1a70f6fc.zip