[syncfusion_flutter_charts] Crash when updating SplineAreaSeries asynchronously

[DrNiels]

Bug description

When changing the range, I update the series data. This update occurs asynchronously. When the data is updated but before setState is called, the app crashes as the length of the regular points and the control high points do not match. As far as I could see, the error only occured in the Android app.

I implemented a fix for my use case here: DrNiels@82e98fe

However, I assume my fix does not handle all cases where this error can occur, even though it fixes my case. But maybe it can support you as inspiration.

Steps to reproduce

1. Load the sample as Android app
2. Pan the chart to the left
3. See it crash

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() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  _MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  List<_SalesData> data = [
    _SalesData(DateTime(2025, 11, 20, 0), 35),
    _SalesData(DateTime(2025, 11, 21, 6), 28),
    _SalesData(DateTime(2025, 11, 22, 12), 34),
    _SalesData(DateTime(2025, 11, 23, 18), 32),
    _SalesData(DateTime(2025, 11, 24, 0), 40),
    _SalesData(DateTime(2025, 11, 25, 0), 32),
  ];

  RangeController _rangeController = RangeController(
    start: DateTime(2025, 11, 20, 0),
    end: DateTime(2025, 11, 27, 0),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter chart')),
      body: Expanded(
        child: SfCartesianChart(
          primaryXAxis: DateTimeAxis(
            minimum: DateTime(2025, 1, 1, 0),
            maximum: DateTime(2025, 11, 27, 0),
            rangeController: _rangeController,
          ),
          zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
          onActualRangeChanged: (ActualRangeChangedArgs args) async {
            if (_rangeController.start.isBefore(data.first.year)) {
              await Future.delayed(const Duration(milliseconds: 100));
      
              data.insertAll(0, [
                _SalesData(
                  data.first.year.subtract(const Duration(days: 3)),
                  25,
                ),
                _SalesData(
                  data.first.year.subtract(const Duration(days: 2)),
                  28,
                ),
                _SalesData(
                  data.first.year.subtract(const Duration(days: 1)),
                  34,
                ),
              ]);
              await Future.delayed(const Duration(milliseconds: 100));
              WidgetsBinding.instance.addPostFrameCallback((_) {
                if (this.mounted) {
                  //setState(() {});
                }
              });
            }
          },
          // Chart title
          title: ChartTitle(text: 'Half yearly sales analysis'),
          // Enable legend
          legend: Legend(isVisible: true),
          // Enable tooltip
          tooltipBehavior: TooltipBehavior(enable: true),
          series: [
            SplineAreaSeries<_SalesData, DateTime>(
              dataSource: data,
              xValueMapper: (_SalesData sales, _) => sales.year,
              yValueMapper: (_SalesData sales, _) => sales.sales,
              splineType: SplineType.monotonic,
              animationDuration: 0,
              markerSettings: MarkerSettings(
                isVisible: false,
                height: 4,
                width: 4,
                borderWidth: 6,
                color: Colors.purple,
                borderColor: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _SalesData {
  _SalesData(this.year, this.sales);

  final DateTime year;
  final double sales;
}

Screenshots or Video

Screenshots / Video demonstration

Current State with Bug:

Screen_Recording_20251105_100231.mp4

With my Fix:

Screen_Recording_20251105_095844.mp4

Stack Traces

Stack Traces

RangeError (RangeError (length): Invalid value: Not in inclusive range 0..4: 5)
SplineAreaSegment._createFillPath (c:\Users\Niels\Documents\flutter-widgets\packages\syncfusion_flutter_charts\lib\src\charts\series\spline_series.dart:1619)
SplineAreaSegment.transformValues (c:\Users\Niels\Documents\flutter-widgets\packages\syncfusion_flutter_charts\lib\src\charts\series\spline_series.dart:1420)
ContinuousSeriesMixin.transformValues (c:\Users\Niels\Documents\flutter-widgets\packages\syncfusion_flutter_charts\lib\src\charts\series\chart_series.dart:4582)
ChartSeriesRenderer.performLayout (c:\Users\Niels\Documents\flutter-widgets\packages\syncfusion_flutter_charts\lib\src\charts\series\chart_series.dart:2450)
CartesianSeriesRenderer.performLayout (c:\Users\Niels\Documents\flutter-widgets\packages\syncfusion_flutter_charts\lib\src\charts\series\chart_series.dart:4235)
XyDataSeriesRenderer.performLayout (c:\Users\Niels\Documents\flutter-widgets\packages\syncfusion_flutter_charts\lib\src\charts\series\chart_series.dart:6287)
RenderObject._layoutWithoutResize (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\rendering\object.dart:2655)
PipelineOwner.flushLayout (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\rendering\object.dart:1160)
PipelineOwner.flushLayout (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\rendering\object.dart:1173)
RendererBinding.drawFrame (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\rendering\binding.dart:629)
WidgetsBinding.drawFrame (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\widgets\binding.dart:1242)
RendererBinding._handlePersistentFrameCallback (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\rendering\binding.dart:495)
SchedulerBinding._invokeFrameCallback (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\scheduler\binding.dart:1438)
SchedulerBinding.handleDrawFrame (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\scheduler\binding.dart:1351)
SchedulerBinding._handleDrawFrame (c:\Users\Niels\Documents\flutter\packages\flutter\lib\src\scheduler\binding.dart:1204)
_invoke (c:\Users\Niels\Documents\flutter\bin\cache\pkg\sky_engine\lib\ui\hooks.dart:331)
PlatformDispatcher._drawFrame (c:\Users\Niels\Documents\flutter\bin\cache\pkg\sky_engine\lib\ui\platform_dispatcher.dart:444)
_drawFrame (c:\Users\Niels\Documents\flutter\bin\cache\pkg\sky_engine\lib\ui\hooks.dart:303)

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [Version 10.0.19045.6456], locale de-DE) [789ms]
    • 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 (6 months 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) [4,0s]

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [7,3s]
    • Android SDK at C:\Users\Niels\AppData\Local\Android\Sdk
    • Platform android-35, build-tools 35.0.0
    • 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)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

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

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.15 (September 2025)) [207ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.14.36511.14
    • Windows 10 SDK version 10.0.26100.0

[!] Android Studio (version 2021.2) [34ms]
    • 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) [32ms]
    • 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.104.2) [31ms]
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.122.0

[√] Connected device (4 available) [959ms]
    • SM S921B (wireless) (mobile) • adb-RFCX306GLHZ-2OV7MI._adb-tls-connect._tcp. • android-arm64  • Android 16 (API 36)
    • Windows (desktop)            • windows                                       • windows-x64    • Microsoft Windows [Version 10.0.19045.6456]
    • Chrome (web)                 • chrome                                        • web-javascript • Google Chrome 142.0.7444.59
    • Edge (web)                   • edge                                          • web-javascript • Microsoft Edge 128.0.2739.42

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

! Doctor found issues in 2 categories.

[natrayansf]

Hi DrNiels,

We understand that you're currently adding data points via the onActualRangeChanged callback. However, this approach only appends new points to the existing list and does not include them in the control point calculations. As a result, this mismatch can lead to exceptions, especially when the chart attempts to render with inconsistent data lengths.

To resolve this, we recommend updating the data using the ChartSeriesController, which ensures that new data points are properly considered in both control point and range calculations before rendering. This approach avoids the asynchronous update issues you're encountering.

We have shared a Knowledge Base (KB) and Sample browser samples for your reference.
SB: Sample Browser | Infinite-scrolling
KB: How to lazily load more data to the chart?

Please feel free to reach out if you need any further assistance.

Regards,
Natrayan

[DrNiels]

I'm aware of the updateDataSource function, but I considered them a helper to animate updates properly, not a requirement when updating. Personally, I always consider cryptic crashes a bug. If the usage of updateDataSource is a requirement, maybe you simply want to throw a more descriptive error? As I'm using my own branch, the issue is fixed my my application, I just wanted to let you know, so you can use it to improve your already great software ;)

[Harsha-SF4223]

Hi DrNiels,

We truly appreciate your proactive approach and feedback! Your solution to handle mismatched segment lengths does resolve the crash in your scenario. However, it triggers a complete widget rebuild and bypasses the chart’s internal synchronization mechanisms.

Our recommended approach is to use ChartSeriesController.updateDataSource(). This method is designed for safe incremental updates (add, remove, or modify points) and ensures that internal caches such as spline control points remain consistent. Mutating the data list asynchronously without this mechanism can lead to mismatched states and the crash you observed.

Please feel free to reach out if you need any further assistance.

Regards,
Harsha.

[DrNiels]

Understood. On my first try, I also had similar issues with updateDataSource, but that were probably mistakes on my end. I may get back to updateDataSource at some time.

Still, a thrown descriptive error would have helped me to find the proper solution faster, e.g., "Data is not synchronised, use ChartSeriesController.updateDataSource" would be a lot better than "RangeError (RangeError (length): Invalid value: Not in inclusive range 0..4: 5)"

[natrayansf]

Hi DrNiels,

We would like to inform you that the onActualRangeChanged callback is used to get triggers whenever the visible range of an axis changes—specifically when the minimum, maximum, or interval values change. Its purpose is to allow you to access and modify the visible range of any axis in your chart.

We understand that you are expecting to load data points while the range changes. As mentioned earlier, this approach only appends new points to the existing list and does not include them in the control point calculations. Based on the data source points and length, the axis range and control points for SplineAreaSeries are calculated first. If data points are added after this calculation, it leads to a mismatch, which results in the assertion you observed.

For safe updates, we recommend using ChartSeriesController.updateDataSource(), which ensures internal consistency and prevents crashes.

Regards,
Natrayan

[DrNiels]

Hello Natrayan,

I have a feeling you don't fully understand my point here. I absolutely understand that updateDataSource is the correct way to go and that I should update my code accordingly and I will get to that.

My only remaining feedback is that you could support developers that run into similar issues with a descriptive error message. If the originial exception would have read something like "Data was updated inconsistently, please use updateDataSource when adding or removing data", I would have understood the issue and fixed it myself without assuming a bug in your framework.

On the other hand, some index out of range seems like an unintended error, not an expected behavior if a developer uses the wrong functions.