[syncfusion_flutter_charts] Sometimes pan is too fast or too slow

[DrNiels]

Bug description

I observed that after zooming in or out, panning sometimes changes its speed and does not move consistently with the mouse. It seems to depend on the zoom steps where I tried to pan.

I use syncfusion_flutter_charts in version 29.2.4

Steps to reproduce

Pan too slow

1. Load the sample
2. Click upper arrow to zoom out to month view
3. Pan a bit
4. Click upper arrow again to zoom out to year view
5. When panning now, it can be seen that the mouse moves faster than the columns

Pan too fast

1. Load the sample
2. Click the upper arrow twice to zoom towards year view
3. Click the lower arrow to zoom to month view
4. Pan a bit
5. Click the lower arrow again to zoom to day view
6. When panning now, it can be seen that the columns move faster than the mouse

If you don't pan in between and simple zoom out twice, everything works fine

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_core/core.dart';

void main() async {
  runApp(
    MaterialApp(
      home: Chart(),
    ),
  );
}

class Chart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ChartState();
}

class ChartState extends State<Chart> {
  RangeController _rangeController = RangeController(
    start: DateTime(2025, 6, 5),
    end: DateTime(2025, 6, 6),
  );

  List<(DateTime, double)> _data = [
  ];

  DateTimeIntervalType _intervalType = DateTimeIntervalType.hours;

  void initState() {
    super.initState();
    setIntervalType(DateTimeIntervalType.days);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: SfCartesianChart(
            series: [
              StackedColumnSeries(
                dataSource: _data,
                xValueMapper: (data, _) => data.$1,
                yValueMapper: (data, _) => data.$2,
              )
            ],
            primaryXAxis: DateTimeAxis(
              minimum: DateTime(2020),
              maximum: DateTime(2030),
              rangeController: _rangeController,
            ),
            zoomPanBehavior: ZoomPanBehavior(
              enablePanning: true,
            ),
          ),
        ),
        IconButton(
          onPressed: () {
            setState(() {
              switch (_intervalType) {
                case DateTimeIntervalType.days:
                  setState(() {
                    setIntervalType(DateTimeIntervalType.months);
                  });
                  break;

                case DateTimeIntervalType.months:
                  setState(() {
                    setIntervalType(DateTimeIntervalType.years);
                  });
                  break;

                default:
                  break;
              }
            });
          },
          icon: Icon(Icons.arrow_upward),
        ),
        IconButton(
          onPressed: () {
            setState(() {
              switch (_intervalType) {
                case DateTimeIntervalType.months:
                  setState(() {
                    setIntervalType(DateTimeIntervalType.days);
                  });
                  break;

                case DateTimeIntervalType.years:
                  setState(() {
                    setIntervalType(DateTimeIntervalType.months);
                  });
                  break;

                default:
                  break;
              }
            });
          },
          icon: Icon(Icons.arrow_downward),
        ),
      ],
    );
  }

  void setIntervalType(DateTimeIntervalType type) {
    _intervalType = type;
    _data.clear();
    switch (type) {
      case DateTimeIntervalType.years:
        _rangeController.start = DateTime(2024);
        _rangeController.end = DateTime(2027);
        _data.add((DateTime(2025), 150.0));
        _data.add((DateTime(2026), 210.0));
        break;

      case DateTimeIntervalType.months:
        _rangeController.start = DateTime(2025);
        _rangeController.end = DateTime(2026);
        _data.add((DateTime(2025, 6), 50.0));
        _data.add((DateTime(2025, 7), 70.0));
        break;

      case DateTimeIntervalType.days:
        _rangeController.start = DateTime(2025, 6);
        _rangeController.end = DateTime(2025, 7);
        _data.add((DateTime(2025, 6, 5), 10.0));
        _data.add((DateTime(2025, 6, 6), 20.0));
        break;

      default:
        throw ArgumentError('Unsupported interval type: $type');
    }
  }
}

Screenshots or Video

Screenshots / Video demonstration

Pan too slow
https://github.com/user-attachments/assets/f1323b5a-623e-4e70-862d-ac4b624b93d2

Pan too fast
https://github.com/user-attachments/assets/6ff4d9a1-8c6b-4021-9c82-c909e8dd1c68

Pan right without pan in between
https://github.com/user-attachments/assets/1ebe3d31-d5a9-4ce3-8139-55ed351b7167

Stack Traces

Stack Traces

Not applicable, no error was thrown

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.32.2, on Microsoft Windows [Version 10.0.26100.4061], locale de-DE) [384ms]
    • Flutter version 3.32.2 on channel stable at C:\Users\niels\OneDrive\Documents\GitHub\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8defaa71a7 (16 hours ago), 2025-06-04 11:02:51 -0700
    • Engine revision 1091508939
    • Dart version 3.8.1
    • DevTools version 2.45.1

[√] Windows Version (11 Home 64-bit, 24H2, 2009) [3,0s]

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2) [2,2s]
    • Android SDK at C:\Users\niels\AppData\Local\Android\sdk
    • Platform android-34, build-tools 33.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web [89ms]
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.5) [88ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.8.34511.84
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2022.2) [22ms]
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)

[√] VS Code (version 1.100.2) [20ms]
    • VS Code at C:\Users\niels\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.112.0

[√] Connected device (3 available) [205ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.26100.4061]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 137.0.7151.56
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 137.0.3296.62

[√] Network resources [1.088ms]
    • All expected network resources are available.

• No issues found!