Charting Magic: A Performance Boost with Syncfusion Flutter Charts
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (225)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (938)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (139)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (68)Development  (654)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (611)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Charting Magic A Performance Boost with Syncfusion Flutter Charts

Charting Magic: A Performance Boost with Syncfusion Flutter Charts

Are 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

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

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

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 forumsupport portal, or feedback portal. We’re committed to helping you succeed!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed