We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Zhu,
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.
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
Code Snippet:
|
series: <ChartSeries>[ FastLineSeries<ChartSampleData, num>( dataSource: dataSource1.chartData, xValueMapper: (ChartSampleData data, _) => data.xValue, yValueMapper: (ChartSampleData data, _) => data.yValue1, color: Colors.red, ), FastLineSeries<ChartSampleData, num>( dataSource: dataSource2.chartData, xValueMapper: (ChartSampleData data, _) => data.xValue, yValueMapper: (ChartSampleData data, _) => data.yValue2, color: Colors.yellow, ), FastLineSeries<ChartSampleData, num>( dataSource: dataSource3.chartData, xValueMapper: (ChartSampleData data, _) => data.xValue, yValueMapper: (ChartSampleData data, _) => data.yValue3, color: Colors.green, ), FastLineSeries<ChartSampleData, num>( dataSource: dataSource4.chartData, xValueMapper: (ChartSampleData data, _) => data.xValue, yValueMapper: (ChartSampleData data, _) => data.yValue4, color: Colors.blue, ), ],
|
Ouput:
You can load more than 1L data points for fast line series and more than 5k data points for other type series. We have prepared sample with 4 fast line series and each series have 3600 data points and it’s working fine at our end. We have shared a sample for your reference.
Regards,
Lokesh Palani.
