[syncfusion_charts] Y Axis stretches according to invisible value

[DrNiels]

Bug description

If left at null, the maximum value of a y axis is determined based on the used values. However, this seems to include invisible values, that are not shown as they are outside of the currently displayed range.

Steps to reproduce

1. Load the code sample
2. Both charts are identical except for the value of the 16th February, that is not visible as the chart only ranges from 17th to 18th February
3. At the upper chart, see that nonetheless, the invisible value affects the maximum value of the y axis, which is at 250, even though it should be ~35 like shown in the lower chart, based on the visible values

Code sample

Code sample

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> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SfCartesianChart(
          primaryYAxis: NumericAxis(),
          primaryXAxis: DateTimeAxis(
            minimum: DateTime(2025, 2, 16),
            initialVisibleMinimum: DateTime(2025, 2, 17),
            maximum: DateTime(2025, 2, 18),
            intervalType: DateTimeIntervalType.days,
          ),
          series: [
            ColumnSeries<(int, DateTime), DateTime>(
              xValueMapper: ((int, DateTime) value, _) => value.$2,
              yValueMapper: ((int, DateTime) value, _) => value.$1,
              dataSource: [
                (200, DateTime(2025, 2, 16)),
                (20, DateTime(2025, 2, 17)),
                (30, DateTime(2025, 2, 18)),
              ]
            )
          ]
        ),
        SfCartesianChart(
          primaryYAxis: NumericAxis(),
          primaryXAxis: DateTimeAxis(
            minimum: DateTime(2025, 2, 16),
            initialVisibleMinimum: DateTime(2025, 2, 17),
            maximum: DateTime(2025, 2, 18),
            intervalType: DateTimeIntervalType.days,
          ),
          series: [
            ColumnSeries<(int, DateTime), DateTime>(
              xValueMapper: ((int, DateTime) value, _) => value.$2,
              yValueMapper: ((int, DateTime) value, _) => value.$1,
              dataSource: [
                (20, DateTime(2025, 2, 16)),
                (20, DateTime(2025, 2, 17)),
                (30, DateTime(2025, 2, 18)),
              ]
            )
          ]
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Stack Traces

Stack Traces

Not applicable

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

I use syncfusion_flutter_charts in version 29.2.4

[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [Version 10.0.19045.5854], locale de-DE) [617ms]
    • Flutter version 3.32.0 on channel stable at C:\Users\Niels\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision be698c48a6 (4 days ago), 2025-05-19 12:59:14 -0700
    • Engine revision 1881800949
    • Dart version 3.8.0
    • DevTools version 2.45.1

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

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc4) [3,0s]
    • 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) [160ms]
    • 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) [26ms]
    • 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) [343ms]
    • 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 [748ms]
    • All expected network resources are available.

! Doctor found issues in 1 category.

[Mugunthan-Ramalingam]

Hi @DrNiels,

We would like to inform you that initialVisibleMinimum and initialVisibleMaximum properties are used to define the initial view range of the axis when the chart is first rendered. These properties take priority over the minimum and maximum values, and this is the expected behavior in SfCartesianChart.

According to your code snippet, the Y-axis range is being calculated correctly. In the first chart, although the data point for 16th February (value: 200) is outside the visible range (which starts from the 17th), it is still part of the data source.

As a result, the Y-axis maximum reflects the highest value in the data (200), leading to a range up to 250. This is why the upper chart shows a higher Y-axis maximum compared to the lower chart, where all values are in the 20–30 range.

Please let us know if you need any further assistance with this.

Regards,
Mugunthan.

[DrNiels]

Too bad, I guess then I'll need to build my own determination minimum and maximum for the axes. Still, thank you for the reply!

[Mugunthan-Ramalingam]

Hi @DrNiels,

Sorry for the inconvenience. By default, the Y-axis range is calculated based on all data points in the series.

To resolve this, we recommend using the anchorToVisibleRangePoints: true property on the primaryYAxis. This property only updates the Y-axis range when the chart’s zoomPanBehavior has zoomMode set to 'x'.

We have shared snippet code and screenshot for your reference.

Code snippet:

SfCartesianChart(
     zoomPanBehavior: ZoomPanBehavior(
       zoomMode: ZoomMode.x,
     ),
     primaryYAxis: NumericAxis(anchorRangeToVisiblePoints:  true),
     .....
),

Screenshot:

anchorToVisibleRangePoints: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#auto-range-calculation
zoomPanBehavior: https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan
SB link: flutter.syncfusion.com/?_ga=2.168327970.261004073.1604898101-1738846659.1591877354#/cartesian-charts/chart-types/line/default-line-chart

Note: If you're not using zooming or panning, you can still apply this behavior by setting zoomMode to ZoomMode.x and disabling all interactions by setting enablePanning, enablePinching, and enableMouseWheelZooming to false.

If you have any further queries, please get back to us. We are always happy to assist you.

Regards,
Mugunthan.

[DrNiels]

Oh no, there's a flag for that... Now, I've build my own custom logic... But it's not wasted, since that logic also handles the interval determination to avoid crashes due to rounding imprecisions, see #2138

Thanks for the response and the explanations!