Jollen MoyaniAre you a Flutter developer who loves to breathe life into your apps with beautiful, interactive charts? Then, you are probably familiar with Syncfusion Flutter Charts, a powerhouse among chart libraries for Flutter.
We’re thrilled to announce that we’ve launched a new version (24.1.43) of our Flutter Charts library. It offers a whopping 6x to 10x rendering speed increase for fast charts and an over 10x rendering speed increase for standard charts. It reduces memory usage by 10x compared to the previous versions.
We’ve given our chart library a complete makeover to make it faster, lighter, and more customizable than ever before. In this blog, we’ll go over the details of this remarkable performance improvement and what it means for you as a developer.
How have we supercharged our Flutter Charts library?
The Syncfusion Flutter Charts library has always been a treasure trove of rich features, boasting over 30+ chart types, chart axes, zooming and panning, animations, and much more.
But we didn’t stop at being good; we aimed for great! We saw the potential for improvement in rendering speed and memory usage, especially when handling live updates, large datasets, multiple series, and complex chart customizations.
So, we rolled up our sleeves and got to work; we improved our Flutter Charts library in the following areas.
Lightening the load
We rewrote our base architecture with a lightweight layout structure, removing existing structures. This turbocharged the rendering of data series when dealing with millions of data points.
Going low level
We made a significant change by inheriting the main parts of the chart, such as the chart axis and chart series, directly from the renderObject widget, the lowest-level widget in Flutter. This allowed us to lay out the elements more effectively and smoothly.
Pruning for performance
We focused on using only the essential properties for the CartesianChartPoint and ChartPoint classes, specifically those relevant for series rendering. We pruned away unrelated properties and dynamically created them in other necessary classes. This strategy significantly reduced memory consumption.
Digging deep
We meticulously examined the inner workings of our Syncfusion Flutter Charts code to find anything that might slow it down. We achieved significant speed improvements by eliminating unnecessary rendering (like zero stroke width or transparent colors).
Fine-tuning frames
We revisited scenarios where we had been using addPostFrameCallback to schedule rendering callbacks at the end of a frame. Instead of waiting for the next frame, we fine-tuned our rendering callbacks.
Resolving issues
We also resolved some notable memory leaks and hidden issues in the previous versions of our Flutter Charts library.
Important: We performed our testing and collected the metrics in this blog using the following specific device configurations. The metrics may vary based on device configuration.
|
Android |
Snapdragon 8+ Gen 1, 8 GB RAM |
|
MacOS |
MacBook Air (Intel), 8 GB RAM |
|
Web |
11th Gen Intel, 16 GB RAM |
|
Windows |
11th Gen Intel, 16 GB RAM |
|
iOS |
iPhone 15 plus—iOS 17 (emulator) |
Performance improvement metrics using high volume data points in Syncfusion Flutter Charts
The data for performance improvement metrics varies depending on the platform and its rendering engine. We observed approximately an eight-fold improvement on web and iOS devices compared to the data from Windows and Android devices when using a fast chart with 1 million data points.
We collected metrics multiple times by disabling the series animation and calculated the average values listed in the following table.
|
Data Points |
Devices |
Old Version (ms) |
New Version (ms) |
Improvement |
|
1 million |
Android |
~2700 |
~450 |
6x faster |
|
iOS |
~2300 |
~260 |
9x faster |
|
|
Web |
~6500 |
~800 |
8x faster |
|
|
MacOS |
~2500 |
~400 |
6x faster |
|
|
Windows |
~2400 |
~400 |
6x faster |
- LineSeries with NumericAxis
|
Data Points |
Devices |
Old Version (ms) |
New Version (ms) |
Improvement |
|
10 thousand |
Android |
~1000 |
~40 |
25x faster |
|
iOS |
~1000 |
~60 |
16x faster |
|
|
Web |
~1100 |
~200 |
6x faster |
|
|
MacOS |
~1000 |
~60 |
16x faster |
|
|
Windows |
~1000 |
~40 |
25x faster |
- ColumnSeries with NumericAxis
|
Data Points |
Devices |
Old Version (ms) |
New Version (ms) |
Improvement |
|
10 thousand |
Android |
~1000 |
~40 |
25x faster |
|
iOS |
~1000 |
~65 |
16x faster |
|
|
Web |
~1200 |
~250 |
5x faster |
|
|
MacOS |
~1000 |
~70 |
15x faster |
|
|
Windows |
~1000 |
~70 |
25x faster |
- ScatterSeries with NumericAxis
|
Data Points |
Devices |
Old Version (ms) |
New Version (ms) |
Improvement |
|
10 thousand |
Android |
~1,000 |
~40 |
15x faster |
|
iOS |
~1,000 |
~65 |
15x faster |
|
|
Web |
~1,100 |
~200 |
6x faster |
|
|
MacOS |
~1,000 |
~65 |
15x faster |
|
|
Windows |
~1,000 |
~65 |
15x faster |
Memory improvement metrics using high volume of data points in the Syncfusion Flutter Charts
We contrived a significant reduction in memory usage compared to the previous version. To test this improvement, we loaded a large volume of data points using the FastLineSeries with NumericAxis on the Windows platform.
The following metrics were observed in the Windows Task Manager’s memory section.
|
Data Points |
Old Version (Windows) |
New Version (Windows) |
Improvement |
|
0.5 million |
~900 MB |
~100 MB |
9x reduction |
|
1 million |
~1,500 MB |
~200 MB |
8x reduction |
Performance improvement metrics comparison on live updating
We orchestrated significant performance improvement during live update scenarios. To achieve this, we continuously updated different chart series by keeping 30 data points always visible.
Specifically, we removed the first chart point and added the last chart point every second using the setState method. We closely monitored CPU and memory usage in the Windows Task Manager while running these live updates for 5 minutes and collected the following metrics.
Old version
|
Series Types |
Start Observation |
After 5 Minutes |
|
Fast Line Series |
CPU : ~20% Memory: ~110 MB |
CPU : ~26% Memory: ~120 MB |
|
Column Series |
CPU : ~19% Memory: ~110 MB |
CPU : ~25% Memory: ~120 MB |
|
Scatter Series |
CPU : ~21% Memory: ~180 MB |
CPU : ~25% Memory: ~190 MB |
Current version
|
Series Types |
Start Observation |
After 5 Minutes |
|
Fast Line Series |
CPU : ~3% Memory: ~80 MB |
CPU : ~3.5% Memory: ~82 MB |
|
Column Series |
CPU : ~3% Memory: ~75 MB |
CPU : ~3.5% Memory: ~80 MB |
|
Scatter Series |
CPU : ~3% Memory: ~70 MB |
CPU : ~3.5% Memory: ~75 MB |
What it means for you as a developer
So, what does this performance improvement mean for you as a developer? Well, it means you can now create more responsive charts for your apps with less memory. You can customize your charts more efficiently and flexibly with the Syncfusion Flutter Charts widget. You can handle more extensive datasets and complex charts without compromising speed or quality. You can also enjoy a smoother user experience with the various chart features.
To demonstrate the difference between our chart library’s previous and current versions, we have created a sample app that compares the rendering time and memory usage of the versions.
Note: Run the sample app in release mode/profile mode to validate an improvement.
Conclusion
We appreciate your time exploring our blog, where we’ve chronicled our relentless pursuit to enhance Syncfusion Flutter Charts. This journey involved meticulous fine-tuning and optimization. The outcome? A chart library that’s not only visually stunning but also delivers outstanding performance, even with extensive datasets. Experience the magic by upgrading to the latest version.
For our existing customers, Essential Studio 2023 Vol. 4 is readily available on the license and downloads page. If you’re new to Syncfusion, we invite you to try our 30-day free trial to explore our extensive features.
Should you need assistance, please contact us through our support forum, support portal, or feedback portal. We’re committed to helping you succeed!
