Max datapoints

[PRASAD RAJENDRA TENDULKAR]

Hello,

We have observed that the bar/column charts take very long time to render when the number of data points (bars) are more than say 1500. The line and scatter charts perform little better but when the data points increase to say 5000 they also start showing the lag while rendering. We even observed the js timeout and the kill page warning thrown by the browser.

Are there some recommendations for the optimal performance where the number of data points are huge? Or any recommendations for max number of data points that can be rendered without a lag? Also is it possible to render the graph in an async manner so that the main thread is not affected?

Thanks,

Prasad

[Yuvaraj Gajaraj]

Hi Prasad,

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.

• Load and store the required data points in the initState method itself, and then set the data points to the chart series. 
• Use NumericAxis or DateTimeAxis instead of CategoryAxis. 
• When there are large number of points to load in line series, you can use FastLineSeries series instead of LineSeries.
• Instead of enabling data markers and labels when there are large number of data points, you can use Trackball to view the point information.
• Set series animationDuration as 0 to disable the animation while loading large number of data points.
• Use 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.
• 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 have any further queries please get back to us.

Regards,

Yuvaraj.