Rendering Performance Degradation for Large Datasets (50K Data Points)

[gouthamrg]

When attempting to render a dataset with 50,000 data points in a chart using the Sfcartesian Flutter library, the rendering stops or performs extremely poorly. The goal is to display all 50,000 data points within a single chart while maintaining smooth performance and responsiveness.

Steps to Reproduce:
Use the Sfcartesian widget to create a simple line chart or scatter chart.
Populate the chart with a dataset of 50,000 data points.
Attempt to view the chart.

Expected Behavior:
The chart should render all 50,000 data points and remain interactive (e.g., zoom, pan, etc.).

Observed Behavior:
The rendering stops or becomes extremely slow.
The chart fails to maintain responsiveness and interactivity.

Could you provide guidance or enhancements to the library to support rendering larger datasets efficiently? If this limitation is intentional, are there any recommended best practices or workarounds to address this? Thanks in advance!

[Reeganantony]

I am facing a similar issue where I have multiple lines (around 300), with each line containing 5000 data points. When I try to render all the lines, the chart hangs.

Could you provide a solution for this issue? Thank you!

[natrayansf]

Hi gouthamrg,

Greetings from Syncfusion.

The following are the key points that can be used to boost the performance of the chart when there is a need to plot high-volume data.

1. Load and store the required data points in the initState method itself, and then set the data points to the chart series.
2. Use NumericAxis or DateTimeAxis instead of CategoryAxis.
3. When there are large number of points to load in line series, you can use FastLineSeries series instead of LineSeries.
4. Instead of enabling data markers and labels when there is a large number of data points, you can use Trackball to view the point information.
5. Set series animationDuration as 0 to disable the animation while loading a large number of data points.
6. Use the updateDataSource method while updating dynamic data points instead of calling setState. For more details refer ug - https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.
7. Use On-demand loading while rendering large data points, it can be used to load more data to the chart when the visible range reaches the end on dragging in the chart. https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading

If you are still facing the issue, we kindly request you to share us with more information on your requirement in detail along with screenshots/screen recordings/issue reproducing samples, so that it will help us assist you in a better way.

Regards,
Natrayan

[LavanyaGowtham2021]

Please reopen this with requested details, if you need further assistance on this.