Performance drop when there are a large number of points on the graph

[Damian Olszewski]

I am currently testing FastLineSeries and ScatterSeries charts and their performance with a large number of points (about 1 million). I have performance problems already at 10,000 points. Especially if I zoom in on the chart. Is there a way to improve the performance of charts? It seems to me that it is impossible to achieve efficient operation with the number of points greater than 100,000.

[Damian Olszewski]

Thank you for the quick reply.

 I currently use most of the things mentioned. I do not use on-demand loading because the main idea is to see all generated points if the user zooms out. In the current situation, already at 10k points a significant drop in performance is felt.

class SyncfusionChartPage extends StatefulWidget {

const SyncfusionChartPage({Key? key}) : super(key: key);

@override

State<SyncfusionChartPage> createState() => _SyncfusionChartPageState();

}

class _SyncfusionChartPageState extends State<SyncfusionChartPage> {

List<DataModel> chartData = [];

List<DataModel> generateSalesData(int count) {

Random random = Random();

List<DataModel> dataList = [];

int currentTime = 0;

for (int i = 0; i < count; i++) {

currentTime++;

double temperature = random.nextDouble() * 100;

dataList.add(DataModel(currentTime, temperature));

}

print('${DateTime.now()} - finish generate data');

return dataList;

}

@override

void initState() {

super.initState();

chartData = generateSalesData(10000);

WidgetsBinding.instance.addPostFrameCallback((_) {

print('${DateTime.now()} - finish generate widgets');

});

}

@override

Widget build(BuildContext context) {

print('${DateTime.now()} - start generate widgets');

return Scaffold(

body: Center(

child: SfCartesianChart(

enableAxisAnimation: false,

enableSideBySideSeriesPlacement: false,

primaryXAxis: NumericAxis(),

zoomPanBehavior: ZoomPanBehavior(

enableMouseWheelZooming: true,

enablePanning: true,

),

trackballBehavior: TrackballBehavior(

enable: true, activationMode: ActivationMode.singleTap),

series: <FastLineSeries<DataModel, int>>[

FastLineSeries<DataModel, int>(

animationDuration: 0,

markerSettings: const MarkerSettings(isVisible: false),

// Bind data source

dataSource: chartData,

xValueMapper: (DataModel data, _) => data.time,

yValueMapper: (DataModel data, _) => data.temperature)

],

),

),

);

}

}

class DataModel {

DataModel(this.time, this.temperature);

final int time;

final double temperature;

}

[Lokesh Palani]

Hi,

We have checked your query and have run the attached code snippet. It worked fine on our end. Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure on what scenario the issue is replicating and the axis you are using. Therefore, we kindly request you to try to replicate the reported issue in the test sample attached below and please include screenshots or screen recordings and specify the platform you are using. This will help us assist you more effectively.

Regards,

Lokesh. P

Attachment: chart_185378_4bc546d.zip

[Damian Olszewski]

I use MacBook Pro Intel Core i7 2019. The application runs both as web and macOS. Problems with displaying more than 10,000 points on one chart. When displaying 100k and scrolling, the application freezes. Horizontal screen scrolling is not smooth.

The business assumption is to display up to 10 lines on one chart (if the user zooms out, they will all be visible), with a total of up to 1 million points. This is probably quite problematic at the moment.

link to the recording

https://drive.google.com/file/d/1XhOzerIBidjW-W6LhHpVA5liT04ERhoo/view?usp=share_link

[Lokesh Palani]

Hi,

We have analyzed your query and checked your reported issue "When displaying 100k and scrolling, the application freezes" on both the macOS platform and web. It was working fine on our end. We have also checked the given link, but it did not open. Please provide us with access to watch the video. Let us know if you need any further assistance.

Regards,

Lokesh P.

[Damian Olszewski]

Sorry, I didn't notice that I can't share from my company account

https://drive.google.com/file/d/1zgVxIEcEIqdP7lX-O3xTgC2zje3_e7z9/view?usp=share_link

[Lokesh Palani]

Hi,

We have created a ticket for your query. Please check the ticket from the below site for further updates.

Link - https://support.syncfusion.com/support/tickets

Regards,

Lokesh P.

[Alberto Bonfiglio]

Greetings,

I seem to have the same issue. I tried with displaying lines together in a chart and separately in individual charts.
Once you get above or near the 10000 datapoint threshold the performance is severely impacted (like 10 seconds to close a dropdown)

I checked and the widges is not getting rebuild so must be something else that is impacting the refresh of the app.

Any insight is appreciated

[Lokesh Palani]

Hi Damian, Alberto,

We would like to inform you that in the latest version of the chart package, we have made some performance improvements in charts widget. Therefore, we kindly request you to upgrade to the latest version mentioned below.

https://pub.dev/packages/syncfusion_flutter_charts/versions/24.1.41

In the mentioned chart version, you will be able to smoothly display large number of data points in the FastLineSeries. Please try the mentioned chart version and let us know the results.

For more details, we have provided the user guide documentation link.

Release notes -
https://help.syncfusion.com/flutter/release-notes/v24.1.41?type=all#chart

Regards,

Lokesh P.