card_data.dart, containing the data (moved to an extra file as it's quite a lot) - In Zip file as copy + paste is too much and .dart is not accepted
chart_data.zip
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_core/core.dart';
import './chart_data.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> allData = SalesData.getAllData();
RangeController _rangeController = RangeController(
start: DateTime(2025, 11, 10),
end: DateTime(2025, 11, 17),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Syncfusion Flutter chart')),
body: SafeArea(
child: Column(
children: [
Expanded(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: DateTime(2000),
maximum: DateTime(2031),
rangeController: _rangeController,
intervalType: DateTimeIntervalType.days,
),
// Chart title
title: ChartTitle(text: 'Half yearly sales analysis'),
// Enable legend
legend: Legend(isVisible: true),
// Enable tooltip
tooltipBehavior: TooltipBehavior(enable: true),
series: <CartesianSeries<SalesData, DateTime>>[
StepAreaSeries<SalesData, DateTime>(
borderDrawMode: BorderDrawMode.all,
dataSource: allData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
color: Colors.blue.withValues(alpha: 0.5),
borderColor: Colors.purple,
name: 'Sales',
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.arrow_left),
onPressed: () {
DateTime start = _rangeController.start;
_rangeController.start = start.copyWith(
day: start.day - 7,
);
DateTime end = _rangeController.end;
_rangeController.end = end.copyWith(
day: end.day - 7,
);
setState(() {});
},
),
IconButton(
icon: Icon(Icons.arrow_right),
onPressed: () {
DateTime start = _rangeController.start;
_rangeController.start = start.copyWith(
day: start.day + 7,
);
DateTime end = _rangeController.end;
_rangeController.end = end.copyWith(
day: end.day + 7,
);
setState(() {});
},
),
],
),
],
),
),
);
}
}
Bug description
Using a chart that displays data over multiple weeks at a high resolution breaks the displayed fill and weird borders are shown. While debugging, everything seemed to be in place, but the display is wrong nonetheless, so maybe it's a framework issue? Also, it tried it on Android, Web, and Windows and of those only Android is affected. The fact, that the border with BorderDrawMode.all is shown correct but the fill that uses the same path does not suggests a framework issue in my opinion as well.
I would have loved to provide a commit with a fix, but I have no idea yet what is going on...
Steps to reproduce
Code sample
Code sample
card_data.dart, containing the data (moved to an extra file as it's quite a lot) - In Zip file as copy + paste is too much and .dart is not accepted
chart_data.zip
main.dart
Screenshots or Video
Screenshots / Video demonstration
Broken in App
Just fine in Windows
Stack Traces
Stack Traces
Not applicable
On which target platforms have you observed this bug?
Android
Flutter Doctor output
Doctor output