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;
}
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
Code sample
Code sample
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
On which target platforms have you observed this bug?
Android
Flutter Doctor output
Doctor output