[syncfusion_flutter_charts] X-Axis with interval month or year updates ticks confusingly

[DrNiels]

Bug description

When panning a chart with fixed interval type and one value for each interval step, the x axis moves along with the values as expected if the interval is day or lower. However, at the levels month and year, the x axis updates the displayed ticks and changes the day, providing the feeling of the ticks "standing still" and only moving the columns, especially if the (default) dateformat does not include the day.

It would be nice to always have the smooth version like day and below.

Syncfusion Flutter Charts are at version 27.1.50

Steps to reproduce

1. Load the provided sample
2. Pan the bottom chart (at day interval) and see how the ticks move with the columns
3. Pan the top chart (at month interval) and see how the ticks jitter a bit in place and update their days

Code sample

Code sample

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

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

class TestChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: SfCartesianChart(
            primaryXAxis: DateTimeAxis(
              initialVisibleMinimum: DateTime(2001),
              initialVisibleMaximum: DateTime(2002),
              interval: 1,
              intervalType: DateTimeIntervalType.months,
              dateFormat: DateFormat.Md(),
            ),
            zoomPanBehavior: ZoomPanBehavior(
              enablePanning: true,
            ),
            series: [
              ColumnSeries<num, DateTime>(
                xValueMapper: (num value, int index) => DateTime(2000, index,),
                yValueMapper: (num value, int index) => index,
                dataSource: List<num>.filled(80, 18),
              )
            ],
          ),
        ),
        Expanded(
          child: SfCartesianChart(
            primaryXAxis: DateTimeAxis(
              initialVisibleMinimum: DateTime(2000, 1),
              initialVisibleMaximum: DateTime(2000, 2),
              interval: 1,
              intervalType: DateTimeIntervalType.days,
            ),
            zoomPanBehavior: ZoomPanBehavior(
              enablePanning: true,
            ),
            series: [
              ColumnSeries<num, DateTime>(
                xValueMapper: (num value, int index) => DateTime(2000, 1, 1 + index),
                yValueMapper: (num value, int index) => index,
                dataSource: List<num>.filled(80, 18),
              )
            ],
          ),
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Weird panning on month and above:

Smooth panning on day and below:

Stack Traces

Stack Traces

Not applicable

On which target platforms have you observed this bug?

Android, Web

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version
    10.0.19045.5011], locale de-DE)
    • Flutter version 3.24.3 on channel stable at
      C:\Users\Niels\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (5 weeks ago), 2024-09-11 16:27:48
      -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc4)
    • 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
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
    • All Android licenses accepted.

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

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6)
    • 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)
    • 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)
    • 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.93.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.98.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.19045.5011]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 129.0.6668.100
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 128.0.2739.42

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

! Doctor found issues in 1 category.

[natrayansf]

Hi DrNiels,

We have reviewed your query and would like to inform you that, based on the current behavior, the axis recalculates the axis labels in the same position when the visible range changes. Currently, there is no option to meet this requirement in the SfCartesianChart. However, we have already logged a feature request for "Instead of recalculating the axis labels keep them stable on panning" in our feedback portal. We will prioritize features for each release based on demand and priority so that this feature may be available in one of our upcoming releases. You can also track the status of the feature with the feedback provided.

FR: https://www.syncfusion.com/feedback/36499

Regards,
Natrayan

[DrNiels]

This is not only restricted to panning. Consider the following example:

Code sample

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

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

class TestChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: SfCartesianChart(
            primaryXAxis: DateTimeAxis(
              initialVisibleMinimum: DateTime(2001, 1, 10),
              initialVisibleMaximum: DateTime(2001, 3, 10),
              interval: 1,
              intervalType: DateTimeIntervalType.months,
            ),
            series: [
              SplineSeries<num, DateTime>(
                xValueMapper: (num value, int index) => DateTime(
                  2000,
                  1,
                  index,
                ),
                yValueMapper: (num value, int index) => index,
                dataSource: List<num>.filled(80, 18),
              )
            ],
          ),
        ),
        Expanded(
          child: SfCartesianChart(
            primaryXAxis: DateTimeAxis(
              initialVisibleMinimum: DateTime(2001, 1, 10),
              initialVisibleMaximum: DateTime(2001, 3, 10),
              interval: 1,
              intervalType: DateTimeIntervalType.months,
              dateFormat: DateFormat.Md(),
            ),
            series: [
              SplineSeries<num, DateTime>(
                xValueMapper: (num value, int index) => DateTime(
                  2000,
                  1,
                  index,
                ),
                yValueMapper: (num value, int index) => index,
                dataSource: List<num>.filled(80, 18),
              )
            ],
          ),
        ),
        Expanded(
          child: SfCartesianChart(
            primaryXAxis: DateTimeAxis(
              initialVisibleMinimum: DateTime(2001, 1, 10, 12),
              initialVisibleMaximum: DateTime(2001, 1, 12, 12),
              interval: 1,
              intervalType: DateTimeIntervalType.days,
              dateFormat: DateFormat.Md(),
            ),
            series: [
              SplineSeries<num, DateTime>(
                xValueMapper: (num value, int index) => DateTime(
                  2000,
                  1,
                  10,
                  index,
                ),
                yValueMapper: (num value, int index) => index,
                dataSource: List<num>.filled(80, 18),
              )
            ],
          ),
        ),
      ],
    );
  }
}

The example shows the following static chart:

The two top charts start on 20th January and show dayly values. In the top chart with default date format, you cannot see that and would assume the chart to start on 1st January. Only the second chart with updated dateFormat can show that the chart starts indeed on 20th January.

So far, I consider this a design decision on your end, even though I don't think it's a good one. However, it becomes even worse if we consider the bottom chart. This one presents hourly values with a dayly axis. In comparison to the monthly axis, this one behaves inconsistent. It shows all steps at 00:00 of each displayed day. If it was consistent, it should start at 11th January around 6 am, which is the leftmost value.

Now, I don't want to advertise changing the dayly axis. Instead, I would have expected the equivalent behavior for monthly and yearly axis.

[Baranibharathip]

Hi DrNiels,

The initialVisibleMinimum and initialVisibleMaximum properties are used to control the visible range of the axis when the chart is first rendered. These properties take effect only when their values lie within the actual data range.

For example, if the actual data range is from January 2000 to March 2003, and you set initialVisibleMinimum to January 2001 and initialVisibleMaximum to March 2001, the visible range will be updated accordingly. However, if the values are set outside the actual data range—say from January 1999 to January 2004—the chart will ignore them and default to displaying the full actual range, from January 2000 to March 2003.

If you want to display a visible range that lies outside the automatically calculated data range, you can explicitly set your own minimum and maximum for the axis. This will override the auto-calculated actual range and allow initialVisibleMinimum and initialVisibleMaximum to work based on your defined axis range. This gives you more control over both the data bounds and the initial view window.

Here's a modified code snippet for your reference:

SfCartesianChart(
  zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
  primaryXAxis: DateTimeAxis(
    minimum: DateTime(2000, 1, 10),
    maximum: DateTime(2002, 3, 10),
    initialVisibleMinimum: DateTime(2001, 1, 10),
    initialVisibleMaximum: DateTime(2001, 3, 10),
    interval: 1,
    intervalType: DateTimeIntervalType.months,
  ),
  series: [
    SplineSeries<num, DateTime>(
      xValueMapper: (num value, int index) =>
          DateTime(2000, 1, index + 1),
      yValueMapper: (num value, int index) => index,
      dataSource: List<num>.filled(80, 18),
    )
  ],
),

Demo:

Recording.2025-04-29.094343.mp4

Regards,
Baranibharathi P.

[Saravanan-Madhesh]

Please reopen this ticket, if you need further assistance with this.