Zooming not working with DateTimeAxis and initial visible minimum and maximum

[DrNiels]

When I try to zoom via mouse wheel or selection zooming, the resulting new range is not correct. In my tests, this seemed to work fine, when initialVisibleMinimum and -Maximum are not set or when a NumericAxis is used.

Consider the following example:

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

bool detailed = false;

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

class TestChart extends StatefulWidget {
  _TestChartState createState() => _TestChartState();
}

class _TestChartState extends State<TestChart> {
  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      primaryYAxis: NumericAxis(),
      primaryXAxis: DateTimeAxis(
        name: 'Test',
        minimum: DateTime(2000),
        maximum: DateTime(
          DateTime.now().year + 1,
        ),
        initialVisibleMinimum: DateTime(2024, 2, 18),
        initialVisibleMaximum: DateTime(2024, 3, 1),
        dateFormat: DateFormat.yMd(),
      ),
      series: [],
      zoomPanBehavior: ZoomPanBehavior(
        enablePinching: true,
        enableMouseWheelZooming: true,
        enableSelectionZooming: true,
        zoomMode: ZoomMode.x,
      ),
    );
  }
}

You can see the error in action here:

I try to zoom to the 24th to 25th February, but the resulting range is from ~24th February to ~24th May. The start could be correct, but the end is definitely wrong.

Output of flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.19.4, on Microsoft Windows [Version 10.0.19045.4170], locale de-DE)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc4)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6)
[√] Android Studio (version 2021.2)
[√] VS Code, 64-bit edition (version 1.87.2)
[√] Connected device (4 available)
[√] Network resources

• No issues found!

I use syncfusion_flutter_charts in version 25.1.35 and on Web

[ghost]

Hi @DrNiels,

We can reproduce the reported issue regarding the 'Selected range is not updated correctly when zooming' at our end. We will fix and include this issue in our upcoming weekly patch release, which is expected to be rolled out on April 16, 2024. We will notify you once it has been rolled out. We appreciate your patience until then.

Regards, Lokesh P.

[ghost]

Hi @DrNiels,

We have reviewed your query and we would like to let you know that, we have considered the maximumZoomLevel property within the zoom pan behavior while doing selection zooming. This property is initialized with a default value of 0.01, and its representing the maximum zoom level. If the chart's zooming level falls below this value, chart's zooming level value will be the maximumZoomLevel value.

To achieve your desired outcome, you can set the maximumZoomLevel value to 0 in ZoomPanBehavior. We have shared the code snippet and modified dart file below for your reference.

Code snippet:

zoomPanBehavior: ZoomPanBehavior(
enablePinching: true,
enableMouseWheelZooming: true,
enableSelectionZooming: true,
zoomMode: ZoomMode.x,

// handle maximumZoomLevel here.
maximumZoomLevel: 0,
),

Regards, Lokesh P.

selected_range_update_in_selection_rect.zip

[DrNiels]

Setting maximumZoomLevel to 0 did the trick for me, thank you!