[syncfusion_flutter_charts] Zooming out not working as intended

[DrNiels]

Bug description

I use a rangecontroller to define and update the current visible range of a chart. Zooming out slightly while keeping the same start and only updating the end seems to ignore the start and uses the chart's minimum value instead. I'm using syncfusion_flutter_charts in version 29.2.4.

Steps to reproduce

1. Load the code sample
2. Click the arrow icon
3. According to the code, the new range should still start at 17th February 2025, but it's the year 2000 now

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: TestChart(),
    ),
  );
}

class TestChart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TestChartState();
}

class TestChartState extends State<TestChart> {
  late RangeController rangeController;

  @override
  void initState() {
    super.initState();

    rangeController = RangeController(
      start: DateTime(2025, 2, 17),
      end: DateTime(2025, 2, 18),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SfCartesianChart(
          primaryYAxis: NumericAxis(),
          primaryXAxis: DateTimeAxis(
            minimum: DateTime(2000),
            maximum: DateTime(
              2031,
            ),
            initialVisibleMinimum: this.rangeController.start,
            initialVisibleMaximum: this.rangeController.end,
            rangeController: this.rangeController,
          ),
        ),
        IconButton(
            icon: Icon(Icons.arrow_upward),
            onPressed: () {
              this.rangeController.start = DateTime(2025, 2, 17);
              this.rangeController.end = DateTime(2025, 2, 24);
              setState(() {});
            }),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Before zooming out via arrow button

After zooming out

Stack Traces

Stack Traces

No stack trace as there's no thrown error.

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.29.3, on Microsoft Windows [Version 10.0.19045.5854], locale de-DE) [567ms]
    • Flutter version 3.29.3 on channel stable at C:\Users\Niels\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (5 weeks ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3

[√] Windows Version (10 Education 64-bit, 22H2, 2009) [2,1s]

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc4) [3,2s]
    • Android SDK at C:\Users\Niels\AppData\Local\Android\Sdk
    • Platform android-34, build-tools 34.0.0-rc4
    • Java binary at: C:\Program Files\Android\Android Studio1\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.11+0--11852314)
    • All Android licenses accepted.

[√] Chrome - develop for the web [162ms]
    • Chrome at C:\Users\Niels\AppData\Local\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6) [161ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.8.34525.116
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (version 2021.2) [27ms]
    • 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
    X Unable to determine bundled Java version.
    • Try updating or re-installing Android Studio.

[√] Android Studio (version 2024.1) [25ms]
    • Android Studio at C:\Program Files\Android\Android Studio1
    • 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.11+0--11852314)

[√] VS Code, 64-bit edition (version 1.96.0) [24ms]
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.110.0

[√] Connected device (3 available) [268ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.5854]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 136.0.7103.114
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 128.0.2739.42

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

! Doctor found issues in 1 category.

[Mugunthan-Ramalingam]

Hi @DrNiels,

We analyzed your query and found that you're using both minimum/maximum and initialVisibleMinimum/initialVisibleMaximum. The initialVisibleMinimum and initialVisibleMaximum properties control the axis’s visible range during initial rendering and only take effect if their values lie within the actual data range.

For example, if the axis minimum is set to 2000 and maximum to 2031, and initialVisibleMinimum is set to February 17, 2025, and initialVisibleMaximum to February 18, 2025, the axis will display this specified visible range during the initial rendering. However, after the initial rendering, if the actual data range spans from 2000 to 2031, and you update initialVisibleMinimum to February 17, 2025, and initialVisibleMaximum to February 24, 2025, the visible range will adjust based on the complete data range—i.e., from 2000 to 2031.

If your goal is to display only a specific range without extending to the full actual data range defined by minimum and maximum, we recommend using only initialVisibleMinimum and initialVisibleMaximum, without explicitly setting the minimum and maximum properties.

Additionally, you can achieve this same behavior using the DateTimeAxisController in our chart instead of using a rangeController. This DateTimeAxisController holds the current visible range details of the axis and provides an option to change the visible range programmatically using a onRendererCreated.

We have shared a modified code snippet below for your reference using both rangeController and DateTimeAxisController.

Modified code snippet using RangeController:

 late RangeController rangeController;
 
 @override
 void initState() {
   super.initState();
 
   rangeController = RangeController(
     start: DateTime(2025, 2, 17),
     end: DateTime(2025, 2, 18),
   );
 }
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('Test Chart')),
     body: Column(
       children: [
         IconButton(
           icon: Icon(Icons.arrow_upward),
           onPressed: () {
             rangeController.start = DateTime(2025, 2, 17);
             rangeController.end = DateTime(2025, 2, 24);
             setState(() {});
           },
         ),
         Expanded(
           child: SfCartesianChart(
             primaryXAxis: DateTimeAxis(
               // Removed minimum and maximum property.
               initialVisibleMinimum: rangeController.start,
               initialVisibleMaximum: rangeController.end,
               rangeController: rangeController,
             ),
             primaryYAxis: NumericAxis(),

Output:

Modified code snippet using DateTimeAxisController:

 DateTimeAxisController? _xAxisController;
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('Test Chart With DateTimeAxisController')),
     body: Column(
       children: [
         IconButton(
           icon: Icon(Icons.arrow_upward),
           onPressed: () {
             // Update the initialVisibleMaximum.
             _xAxisController?.visibleMaximum = DateTime(2025, 2, 24);
             // Update the initialVisibleMinimum.
             _xAxisController?.visibleMinimum = DateTime(2025, 2, 17);
           },
         ),
         Expanded(
           child: SfCartesianChart(
             primaryXAxis: DateTimeAxis(
               onRendererCreated: (DateTimeAxisController controller) {
                 _xAxisController = controller;
               },
               initialVisibleMinimum: DateTime(2025, 2, 17),
               initialVisibleMaximum: DateTime(2025, 2, 18),
             ),
             primaryYAxis: NumericAxis(),

Output:

UG Link: Callbacks in Flutter Cartesian Charts widget | Syncfusion

Please check and get back to us if you require further assistance.

Regards,
Mugunthan.

[DrNiels]

Okay, I can simply remove initialVisibleMinimum and initialVisibleMaximum and take those values from the rangeController. But that doesn't solve the issue. Removing minimum and maximum is not feasible for me.

In our proper implementation, we adjust the visible range and load data on demand, meaning the values are not available initially. In my provided sample, if I remove minimum and maximum zooming out does not work as intended, and only zooms out partially, not into the provided range. In my real application, I would then load the displayed data. For the sake of a simple example, I simple leave it empty.

Also, using a DateTimeAxisController leads to the same original error. Here's my updated example with DateTimeAxisController:

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

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

class TestChart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TestChartState();
}

class TestChartState extends State<TestChart> {
  DateTimeAxisController? _xAxisController;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SfCartesianChart(
          primaryYAxis: NumericAxis(),
          primaryXAxis: DateTimeAxis(
            minimum: DateTime(2000),
            maximum: DateTime(
              2031,
            ),
            onRendererCreated: (DateTimeAxisController controller) {
              _xAxisController = controller;
            },
            initialVisibleMinimum: DateTime(2025, 2, 17),
            initialVisibleMaximum: DateTime(2025, 2, 18),
          ),
        ),
        IconButton(
            icon: Icon(Icons.arrow_upward),
            onPressed: () {
              // Update the initialVisibleMinimum.
              _xAxisController?.visibleMinimum = DateTime(2025, 2, 17);
              // Update the initialVisibleMaximum.
              _xAxisController?.visibleMaximum = DateTime(2025, 2, 24);
            }),
      ],
    );
  }
}

In both cases, once the start time does not remain equal during zoom, everything works as intended, e.g., 15th February instead of 17th.

I'm honestly surprised to see your working GIFs as I tried to update according to your posted snippets... Could you post your full sample code so I can check what's different in your implementation than in mine?

[Hariram-SF4428]

Hi @DrNiels,

We analyzed your query, and based on your description and the provided code, it appears that the case may be due to rendering the chart without a series containing valid data. In our charts, the initialVisibleMinimum and initialVisibleMaximum properties take effect only after the axis has been initialized with at least one series that contains valid data. If the chart is rendered without any data, these properties will not behave as expected.

To confirm this, please ensure your chart includes a series with valid data points during rendering. If your goal is to display only a specific range (e.g., from February 17 to February 24, 2025) and not extend across the full data range (e.g., from 2000 to 2031) after zooming, we recommend removing the minimum and maximum properties and relying solely on initialVisibleMinimum and initialVisibleMaximum. If you need to display the axis without rendering actual data, we suggest using a series with null as the y-values and valid x-values.

For your reference, we have shared a code snippet and sample with the DateTimeAxisController without minimum and maximum to demonstrate this behavior. Furthermore, we are taking the necessary steps to address this scenario.

 DateTimeAxisController? _xAxisController;
 
 final List<ChartData> data = [
   ChartData(DateTime(2025, 2, 17), null),
   ChartData(DateTime(2025, 2, 18), null),
   ChartData(DateTime(2025, 2, 19), null),
   ChartData(DateTime(2025, 2, 20), null),
   ChartData(DateTime(2025, 2, 21), null),
   ChartData(DateTime(2025, 2, 22), null),
   ChartData(DateTime(2025, 2, 30), null),
 ];
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('Test Chart')),
     body: Column(
       children: [
         SfCartesianChart(           
           primaryXAxis: DateTimeAxis(
             edgeLabelPlacement: EdgeLabelPlacement.shift,
             dateFormat: DateFormat.yMd(),
             onRendererCreated: (DateTimeAxisController controller) {
               _xAxisController = controller;
             },
             initialVisibleMinimum: DateTime(2025, 2, 17),
             initialVisibleMaximum: DateTime(2025, 2, 18),
           ),
           primaryYAxis: NumericAxis(),
           series: <CartesianSeries>[
             LineSeries<ChartData, DateTime>(
               dataSource: data,
               xValueMapper: (ChartData sales, _) => sales.date,
               yValueMapper: (ChartData sales, _) => sales.value,
               markerSettings: MarkerSettings(isVisible: true),
               dataLabelSettings: DataLabelSettings(isVisible: true),
               animationDuration: 0,
             ),
           ],
         ),
         IconButton(
           icon: Icon(Icons.arrow_upward),
           onPressed: () {
             // Update the initialVisibleMaximum.
             _xAxisController?.visibleMinimum = DateTime(2025, 2, 17);
             // Update the initialVisibleMinimum.
             _xAxisController?.visibleMaximum = DateTime(2025, 2, 24);
           },
         ),
       ],
     ),
   );
 }
}
 
// Model class for chart data
class ChartData {
 final DateTime date;
 final double? value;
 
 ChartData(this.date, this.value);
}
 

Output:

Sample - gh2354.zip

Please check and get back to us if you require further assistance.

Regards,
Hariram S

[DrNiels]

In my scenario, avoiding minimum and maximum is not really a good option as I load data on demand when the users zooms or pans to its location.

So, does this mean this is a bug and you simply provided a workaround so I can avoid it? Of course, a workaround is appreciated, but in my case it would turn really hacky, as I need to add "empty" datapoints to the beginning and the end of the potential date range... Thus, I would prefer to wait for a fix. Or am I actually doing something wrong?

[Mugunthan-Ramalingam]

Hi @DrNiels,

We’d like to clarify that the workaround we provided is a practical approach to fulfill your requirement when loading data on demand. You don’t need to create empty data points across the full potential date range during initial load. Since your application already knows the axis minimum and maximum at runtime while updating the visible range dynamically, you can generate empty data points for that specific range only when needed.

This approach avoids unnecessary data creation upfront and works well with dynamic data loading strategies like yours.

In the updated sample below, we initialize the chart with only two data points for DateTime(2025, 2, 17) and DateTime(2025, 2, 18). Then, upon interaction (e.g., button click), we extend the visible range and programmatically add empty data points up to DateTime(2025, 2, 24). We have shared a sample for your reference.

Code snippet:

late List<ChartData> chartData;

 
@override
void initState() {
 super.initState();
 // Initialize with initial data range points.
 chartData = [
   ChartData(DateTime(2025, 2, 17), null),
   ChartData(DateTime(2025, 2, 18), null),
 ];
}

 
// Dynamic time to load data for dynamic range. 
IconButton(
 icon: Icon(Icons.arrow_downward),
 onPressed: () {
   _updateDataAndZoom();
 },
),

 
void _updateDataAndZoom() {

 final DateTime start = DateTime(2025, 2, 17);
 final DateTime end = DateTime(2025, 2, 24);
 final existingDates = chartData.map((e) => e.date).toSet();

 for (int i = 0; i <= end.difference(start).inDays; i++) {
   final date = start.add(Duration(days: i));
   if (!existingDates.contains(date)) {
     chartData.add(ChartData(date, null));
   }
 }

 
 chartData.sort((a, b) => a.date.compareTo(b.date));

_xAxisController?.visibleMinimum = start;
_xAxisController?.visibleMaximum = end;
}

Sample: gh_2354.zip

Regards,
Mugunthan.

[DrNiels]

I created another example, that's closer to our implementation and hopefully highlights why I'd really prefer to use minimum and maximum:

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

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

class TestChart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TestChartState();
}

class TestChartState extends State<TestChart> {
  ChartSeriesController? controller;
  final List<ChartData> data = [ChartData(DateTime(2025, 2, 17), 5)];

  @override
  Widget build(BuildContext context) {
    DateTimeAxis xAxis = DateTimeAxis(
      minimum: DateTime(2000),
      maximum: DateTime(2031),
      initialVisibleMinimum: DateTime(2025, 2, 17),
      initialVisibleMaximum: DateTime(2025, 2, 18),
    );
    return SfCartesianChart(
      primaryYAxis: NumericAxis(),
      primaryXAxis: xAxis,
      series: <CartesianSeries>[
        LineSeries<ChartData, DateTime>(
          dataSource: data,
          xValueMapper: (ChartData sales, _) => sales.date,
          yValueMapper: (ChartData sales, _) => sales.value,
          markerSettings: MarkerSettings(isVisible: true),
          dataLabelSettings: DataLabelSettings(isVisible: true),
          animationDuration: 0,
          onRendererCreated: (ChartSeriesController controller) {
            this.controller = controller;
          },
        ),
      ],
      zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
      onActualRangeChanged: (ActualRangeChangedArgs rangeChangedArgs) {
        if (rangeChangedArgs.axis != xAxis) {
          return;
        }

        WidgetsBinding.instance.addPostFrameCallback((_) {
          _updateRange(
            rangeChangedArgs.visibleMin,
            rangeChangedArgs.visibleMax,
          );
        });
      },
    );
  }

  _updateRange(num min, num max) {
    int addedAfter = 0;
    while (max > data.last.date.millisecondsSinceEpoch) {
      data.add(
        ChartData(data.last.date.add(Duration(hours: 1)), (data.last.value + 1) % 6),
      );
      addedAfter++;
    }
    int addedBefore = 0;
    while (min < data.first.date.millisecondsSinceEpoch) {
      data.insert(
        0,
        ChartData(
          data.first.date.subtract(Duration(hours: 1)),
          (data.first.value + 5) % 6,
        ),
      );
      addedBefore++;
    }

    if ((addedAfter + addedBefore) > 0) {
      print(
        'Added data indexes: ${List<int>.generate(addedBefore, (int index) => index) + List<int>.generate(addedAfter, (int index) => data.length - addedAfter + index)}',
      );
      controller?.updateDataSource(
        addedDataIndexes:
            List<int>.generate(addedBefore, (int index) => index) +
            List<int>.generate(
              addedAfter,
              (int index) => data.length - addedAfter + index,
            ),
      );
      setState(() {});
    }
  }
}

// Model class for chart data
class ChartData {
  final DateTime date;
  final double value;

  ChartData(this.date, this.value);
}

Thanks to the defined minimum and maximum, a user can pan to the left and right. New data is loaded via onActualRangeChanged. Now, if I understand your explanations from earlier, I could instead add a "wrapper" of null values around the loaded values. When a user pans, I would need to expand that wrapper so he can keep panning until 2030 if he wants to. I would need to add that wrapper immediately so the user is not blocked due to a slow connection to the server that creates the actual values. In parallel, I would need to request new data from the server as needed, replacing the null values with the actual values. While possible, that seems like a lot of overhead. Did I understand your explanation correctly?

Of course, this latest code sample does not reproduce the original error any more, it's simply meant to sketch my real implementation and hopefully hightlighting why using minimum and maximum is my preferred approach here.