Charting Magic: A Performance Boost with Syncfusion Flutter Charts
Tags: flutter, charts, mobile, web
Published: 2024-01-19 12:54:43

---
title: Charting Magic: A Performance Boost with Syncfusion Flutter Charts
published: true
date: 2024-01-09 13:51:45 UTC
tags: flutter, charts, mobile, web
canonical_url: https://www.syncfusion.com/blogs/post/performance-boost-flutter-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2srbvah0k0ejtfv08wyt.png
---
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](https://www.syncfusion.com/flutter-widgets/flutter-charts "Flutter Charts"), a powerhouse among chart libraries for Flutter.

We’re thrilled to announce that we’ve launched a [new version](https://pub.dev/packages/syncfusion_flutter_charts/versions/24.1.43 "Syncfusion Flutter Charts on pub.dev") **(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](https://www.syncfusion.com/flutter-widgets/flutter-charts "Flutter Charts"), 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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis-class.html "ChartAxis class of Flutter Charts") and [chart series](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries-class.html "ChartSeries class of Flutter Charts"), directly from the [renderObject](https://api.flutter.dev/flutter/widgets/RenderObjectWidget-class.html "RenderObjectWidget class of Flutter Charts") 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](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartPoint-class.html "CartesianChartPoint class of Flutter Charts") and [ChartPoint](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPoint-class.html "ChartPoint class of Flutter Charts") 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](https://www.syncfusion.com/flutter-widgets/flutter-charts "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](https://api.flutter.dev/flutter/scheduler/SchedulerBinding/addPostFrameCallback.html "addPostFrameCallback method of Flutter Charts") 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.
<table width="363">
<tbody>
<tr>
<td width="126">
<p><strong>Android</strong></p>
</td>
<td width="237">
<p>Snapdragon 8+ Gen 1, 8 GB RAM</p>
</td>
</tr>
<tr>
<td width="126">
<p><strong>MacOS</strong></p>
</td>
<td width="237">
<p>MacBook Air (Intel), 8 GB RAM</p>
</td>
</tr>
<tr>
<td width="126">
<p><strong>Web</strong></p>
</td>
<td width="237">
<p>11th Gen Intel, 16 GB RAM</p>
</td>
</tr>
<tr>
<td width="126">
<p><strong>Windows</strong></p>
</td>
<td width="237">
<p>11th Gen Intel, 16 GB RAM</p>
</td>
</tr>
<tr>
<td width="126">
<p><strong>iOS</strong></p>
</td>
<td width="237">
<p>iPhone 15 plus—iOS 17 (emulator)</p>
</td>
</tr>
</tbody>
</table>

## 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.

- [FastLineSeries](https://help.syncfusion.com/flutter/cartesian-charts/chart-types/fast-line-chart "Fast Line Chart in Flutter") with [NumericAxis](https://help.syncfusion.com/flutter/cartesian-charts/axis-types#numeric-axis "Numeric axis in Flutter Charts")

<table width="517">
<tbody>
<tr>
<td width="97">
<p><strong>Data Points</strong></p>
</td>
<td width="106">
<p><strong>Devices</strong></p>
</td>
<td width="103">
<p><strong>Old Version (ms)</strong></p>
</td>
<td width="104">
<p><strong>New Version (ms)</strong></p>
</td>
<td width="107">
<p><strong>Improvement </strong></p>
</td>
</tr>
<tr>
<td rowspan="5" width="97">
<p>1 million</p>
</td>
<td width="106">
<p>Android</p>
</td>
<td width="103">
<p>~2700</p>
</td>
<td width="104">
<p> ~450</p>
</td>
<td width="107">
<p>6x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>iOS</p>
</td>
<td width="103">
<p>~2300</p>
</td>
<td width="104">
<p>~260</p>
</td>
<td width="107">
<p>9x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Web</p>
</td>
<td width="103">
<p>~6500</p>
</td>
<td width="104">
<p>~800</p>
</td>
<td width="107">
<p>8x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>MacOS</p>
</td>
<td width="103">
<p>~2500</p>
</td>
<td width="104">
<p>~400</p>
</td>
<td width="107">
<p>6x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Windows</p>
</td>
<td width="103">
<p>~2400</p>
</td>
<td width="104">
<p>~400</p>
</td>
<td width="107">
<p>6x faster</p>
</td>
</tr>
</tbody>
</table>
<ul>
<li><a title="Line Chart in Flutter" href="https://help.syncfusion.com/flutter/cartesian-charts/chart-types/line-chart" target="_blank" rel="noopener">LineSeries</a> with <a title="Numeric axis in Flutter Charts" href="https://help.syncfusion.com/flutter/cartesian-charts/axis-types#numeric-axis" target="_blank" rel="noopener">NumericAxis</a></li>
</ul>
<table width="517">
<tbody>
<tr>
<td width="97">
<p><strong>Data Points</strong></p>
</td>
<td width="106">
<p><strong>Devices</strong></p>
</td>
<td width="103">
<p><strong>Old Version (ms)</strong></p>
</td>
<td width="104">
<p><strong>New Version (ms)</strong></p>
</td>
<td width="107">
<p><strong>Improvement </strong></p>
</td>
</tr>
<tr>
<td rowspan="5" width="97">
<p>10 thousand</p>
</td>
<td width="106">
<p>Android</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p> ~40</p>
</td>
<td width="107">
<p>25x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>iOS</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p>~60</p>
</td>
<td width="107">
<p>16x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Web</p>
</td>
<td width="103">
<p>~1100</p>
</td>
<td width="104">
<p>~200</p>
</td>
<td width="107">
<p>6x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>MacOS</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p>~60</p>
</td>
<td width="107">
<p>16x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Windows</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p>~40</p>
</td>
<td width="107">
<p>25x faster</p>
</td>
</tr>
</tbody>
</table>
<ul>
<li><a title="Column Chart in Flutter" href="https://help.syncfusion.com/flutter/cartesian-charts/chart-types/column-chart" target="_blank" rel="noopener">ColumnSeries</a> with <a title="Numeric axis in Flutter Charts" href="https://help.syncfusion.com/flutter/cartesian-charts/axis-types#numeric-axis" target="_blank" rel="noopener">NumericAxis</a></li>
</ul>
<table width="517">
<tbody>
<tr>
<td width="97">
<p><strong>Data Points</strong></p>
</td>
<td width="106">
<p><strong>Devices</strong></p>
</td>
<td width="103">
<p><strong>Old Version (ms)</strong></p>
</td>
<td width="104">
<p><strong>New Version (ms)</strong></p>
</td>
<td width="107">
<p><strong>Improvement </strong></p>
</td>
</tr>
<tr>
<td rowspan="5" width="97">
<p>10 thousand</p>
</td>
<td width="106">
<p>Android</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p> ~40</p>
</td>
<td width="107">
<p>25x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>iOS</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p>~65</p>
</td>
<td width="107">
<p>16x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Web</p>
</td>
<td width="103">
<p>~1200</p>
</td>
<td width="104">
<p>~250</p>
</td>
<td width="107">
<p>5x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>MacOS</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p>~70</p>
</td>
<td width="107">
<p>15x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Windows</p>
</td>
<td width="103">
<p>~1000</p>
</td>
<td width="104">
<p>~70</p>
</td>
<td width="107">
<p>25x faster</p>
</td>
</tr>
</tbody>
</table>
<ul>
<li><a title="Scatter Chart in Flutter" href="https://help.syncfusion.com/flutter/cartesian-charts/chart-types/scatter-chart" target="_blank" rel="noopener">ScatterSeries</a> with <a title="Numeric axis in Flutter Charts" href="https://help.syncfusion.com/flutter/cartesian-charts/axis-types#numeric-axis" target="_blank" rel="noopener">NumericAxis</a></li>
</ul>
<table width="517">
<tbody>
<tr>
<td width="97">
<p><strong>Data Points</strong></p>
</td>
<td width="106">
<p><strong>Devices</strong></p>
</td>
<td width="103">
<p><strong>Old Version (ms)</strong></p>
</td>
<td width="104">
<p><strong>New Version (ms)</strong></p>
</td>
<td width="107">
<p><strong>Improvement </strong></p>
</td>
</tr>
<tr>
<td rowspan="5" width="97">
<p>10 thousand</p>
</td>
<td width="106">
<p>Android</p>
</td>
<td width="103">
<p>~1,000</p>
</td>
<td width="104">
<p> ~40</p>
</td>
<td width="107">
<p>15x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>iOS</p>
</td>
<td width="103">
<p>~1,000</p>
</td>
<td width="104">
<p>~65</p>
</td>
<td width="107">
<p>15x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Web</p>
</td>
<td width="103">
<p>~1,100</p>
</td>
<td width="104">
<p>~200</p>
</td>
<td width="107">
<p>6x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>MacOS</p>
</td>
<td width="103">
<p>~1,000</p>
</td>
<td width="104">
<p>~65</p>
</td>
<td width="107">
<p>15x faster</p>
</td>
</tr>
<tr>
<td width="106">
<p>Windows</p>
</td>
<td width="103">
<p>~1,000</p>
</td>
<td width="104">
<p>~65</p>
</td>
<td width="107">
<p>15x faster</p>
</td>
</tr>
</tbody>
</table>
## 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](https://help.syncfusion.com/flutter/cartesian-charts/chart-types/fast-line-chart "Fast Line Chart in Flutter") with [NumericAxis](https://help.syncfusion.com/flutter/cartesian-charts/axis-types#numeric-axis "Numeric axis in Flutter Charts") on the Windows platform.

The following metrics were observed in the Windows Task Manager’s memory section.
<table width="499">
<tbody>
<tr>
<td width="125">
<p><strong>Data </strong><strong>Points</strong></p>
</td>
<td width="125">
<p><strong>Old Version (Windows)</strong></p>
</td>
<td width="125">
<p><strong>New Version (Windows)</strong></p>
</td>
<td width="125">
<p><strong>Improvement </strong></p>
</td>
</tr>
<tr>
<td width="125">
<p>0.5 million</p>
</td>
<td width="125">
<p>~900 MB</p>
</td>
<td width="125">
<p>~100 MB</p>
</td>
<td width="125">
<p>9x reduction</p>
</td>
</tr>
<tr>
<td width="125">
<p>1 million</p>
</td>
<td width="125">
<p>~1,500 MB</p>
</td>
<td width="125">
<p>~200 MB</p>
</td>
<td width="125">
<p>8x reduction</p>
</td>
</tr>
</tbody>
</table>
## 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 ](https://api.flutter.dev/flutter/widgets/ModalRoute/setState.html "setState method of Flutter Charts")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
<table width="623">
<tbody>
<tr>
<td width="208">
<p><strong>Series Types</strong></p>
</td>
<td width="208">
<p><strong>Start Observation </strong></p>
</td>
<td width="208">
<p><strong>After 5 Minutes </strong></p>
</td>
</tr>
<tr>
<td width="208">
<p>Fast Line Series</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~20%</p>
<p><strong>Memory</strong>:  ~110 MB</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~26%</p>
<p><strong>Memory</strong>:  ~120 MB</p>
</td>
</tr>
<tr>
<td width="208">
<p>Column Series</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~19%</p>
<p><strong>Memory</strong>:  ~110 MB</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~25%</p>
<p><strong>Memory</strong>:  ~120 MB</p>
</td>
</tr>
<tr>
<td width="208">
<p>Scatter Series</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~21%</p>
<p><strong>Memory</strong>:  ~180 MB</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~25%</p>
<p><strong>Memory</strong>:  ~190 MB</p>
</td>
</tr>
</tbody>
</table>
<h3>Current version</h3>
<table width="623">
<tbody>
<tr>
<td width="208">
<p><strong>Series Types</strong></p>
</td>
<td width="208">
<p><strong>Start Observation </strong></p>
</td>
<td width="208">
<p><strong>After 5 Minutes </strong></p>
</td>
</tr>
<tr>
<td width="208">
<p>Fast Line Series</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~3%</p>
<p><strong>Memory</strong>:  ~80 MB</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~3.5%</p>
<p><strong>Memory</strong>:  ~82 MB</p>
</td>
</tr>
<tr>
<td width="208">
<p>Column Series</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~3%</p>
<p><strong>Memory</strong>:  ~75 MB</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~3.5%</p>
<p><strong>Memory</strong>:  ~80 MB</p>
</td>
</tr>
<tr>
<td width="208">
<p>Scatter Series</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~3%</p>
<p><strong>Memory</strong>:  ~70 MB</p>
</td>
<td width="208">
<p><strong>CPU</strong>        :  ~3.5%</p>
<p><strong>Memory</strong>:  ~75 MB</p>
</td>
</tr>
</tbody>
</table>
## 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](https://www.syncfusion.com/flutter-widgets/flutter-charts "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](https://github.com/SyncfusionExamples/Performance-Improvement-Metrics-Sample-in-the-Syncfusion-Flutter-Charts "Performance Improvement Metrics Sample in the Syncfusion Flutter Charts GitHub demo") 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](https://www.syncfusion.com/flutter-widgets/flutter-charts "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](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, we invite you to try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of Essential Studio products") to explore our extensive features.

Should you need assistance, please contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Syncfusion Feedback Portal"). We’re committed to helping you succeed!

## Related blogs

- [What’s New in Flutter: 2023 Volume 4](https://www.syncfusion.com/blogs/post/flutter-2023-volume-4.aspx "Blog: What’s New in Flutter: 2023 Volume 4")
- [Create Dynamic Forms in Flutter](https://www.syncfusion.com/blogs/post/dynamic-forms-in-flutter.aspx "Blog: Create Dynamic Forms in Flutter")
- [Seamless Excel-Like Filtering Support in Flutter DataGrid](https://www.syncfusion.com/blogs/post/seamless-excel-like-filtering-in-flutter-datagrid.aspx "Blog: Seamless Excel-Like Filtering Support in Flutter DataGrid")
- [Create a Repeating Appointment Using the Recurrence Rule in Flutter Event Calendar](https://www.syncfusion.com/blogs/post/create-a-repeating-appointment-using-the-recurrence-rule-in-flutter-event-calendar.aspx "Blog: Create a Repeating Appointment Using the Recurrence Rule in Flutter Event Calendar")