Performance Improvements in Blazor Gantt Chart
Tags: dotnet, csharp, blazor, webdev
Published: 2022-05-31 11:41:32

---
title: Performance Improvements in Blazor Gantt Chart
published: true
date: 2022-05-31 10:30:32 UTC
tags: dotnet, csharp, blazor, webdev
canonical_url: https://www.syncfusion.com/blogs/post/performance-improvements-in-blazor-gantt-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tao9wgenidbjyihoseix.png
---

The Syncfusion [Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Blazor Gantt Chart") component is the most feature-loaded Gantt Chart in the Blazor market. Yet there was ample space for improving its performance for our [2022 Volume 1](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download "Essential Studio 2022 Volume 1") release.

In this blog, we will see how well the performance has been improved in the Blazor Gantt Chart component.

## Improvements

To improve the performance of the Gantt Chart component, we tweaked the component lifecycle and revamped the synchronization of the chart and tree grid parts of the Gantt Chart.

We primarily refined the algorithm for data manipulation and operations in our Gantt Chart source code. We handled this carefully, as it contains a complex hierarchical structure, and each piece of data has more dependencies on multiple other pieces of data.

We worked hard on these areas and improved performance to around 20 times better than before with virtualization and around three times better without virtualization.

Let’s look at this in more detail.

## Performance optimization on initial loading

The following tables show the performance metrics of the Blazor Gantt Chart component during initial load with 2,500 and 5,000 records, comparing the 2021 Volume 4 and 2022 Volume 1 release versions.

### With row virtualization:

<table width="603">
<tbody>
<tr>
<td width="196"></td>
<td width="180">2021 Volume 4 (in seconds)</td>
<td width="227">2022 Volume 1 (in seconds)</td>
</tr>
<tr>
<td width="196">Initial load with 2.5K records</td>
<td width="180">~5.7</td>
<td width="227">~0.307</td>
</tr>
<tr>
<td width="196">Initial load with 5K records</td>
<td width="180">~23.4</td>
<td width="227">~0.724</td>
</tr>
</tbody>
</table>

![Performance metrics of Blazor Gantt Chart on initial loading with virtualization](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Performance-metrics-of-Blazor-Gantt-Chart-on-initial-loading-with-virtualization.png)

### Without row virtualization:

<table width="603">
<tbody>
<tr>
<td width="196"></td>
<td width="180">2021 Volume 4 (in seconds)</td>
<td width="227">2022 Volume 1 (in seconds)</td>
</tr>
<tr>
<td width="196">Initial load with 2.5K records</td>
<td width="180">~10.5</td>
<td width="227">~4.9</td>
</tr>
<tr>
<td width="196">Initial load with 5K records</td>
<td width="180">~35.7</td>
<td width="227">~12.4</td>
</tr>
</tbody>
</table>

![Performance metrics of Blazor Gantt Chart on initial loading without virtualization](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Performance-metrics-of-Blazor-Gantt-Chart-on-initial-loading-without-virtualization.png)

**Note** : Metrics were taken in the following machine and application configurations.  
**Machine** : Processor: i5 @ 2.30 GHz, RAM: 8GB, OS: Windows 11  
**Application** : We ran the Blazor server app in the Chrome browser with the component’s script and individual component NuGet [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt "Syncfusion.Blazor.Gantt NuGet package") referenced at the app-end.

## Performance optimization of interaction features

Not only have we improved the initial loading, but the performance of the features, too. CRUD operations, selection, expand/collapse actions, and more have been improved in our latest release.

The following performance metrics were taken with 5,000 records and with the row virtualization feature enabled.

<table width="603">
<tbody>
<tr>
<td width="196">For 5,000 records</td>
<td width="180">2021 Volume 4 (in seconds)</td>
<td width="227">2022 Volume 1 (in seconds)</td>
</tr>
<tr>
<td width="196">Expand row</td>
<td width="180">~0.103</td>
<td width="227">~0.082</td>
</tr>
<tr>
<td width="196">Collapse row</td>
<td width="180">~0.132</td>
<td width="227">~0.048</td>
</tr>
<tr>
<td width="196">Selection</td>
<td width="180">~1.26</td>
<td width="227">~0.011</td>
</tr>
</tbody>
</table>

You can still further improve the performance at the app-end by [avoiding unnecessary component rerendering](https://blazor.syncfusion.com/documentation/gantt-chart/webassembly-performance#avoid-unnecessary-component-renders "Avoid unnecessary component renders in Blazor Gantt Chart").

**Note** : You can check our [Blazor Gantt Chart demos](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities "Blazor Gantt Chart Example") and [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started "Getting Started with Blazor Gantt Chart Component") for detailed explanations and the facts you need to proceed further.

## GitHub reference

Also, check out the [Syncfusion Blazor Gantt Chart performance metrics GitHub demo](https://github.com/SyncfusionExamples/gantt-chart-performance-metrics-examples-in-blazor-server-app "Gantt Chart performance metrics examples in Blazor server app on GitHub").

## Conclusion

Thanks for reading! Right now, the [Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Blazor Gantt Chart") component can handle a maximum of 60 thousand records in the Blazor Server application. We won’t stop here in improving the Gantt Chart’s performance. We will give our best effort to further enhance its performance in the near future. Give it a try now and leave your feedback in the comments section below!

If you would like to try Syncfusion components, you can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm "Free evaluation of the Syncfusion Essential Studio").

If you have questions, you can also contact us through our [support forums](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/ "Syncfusion Feedback Portal"). We are always happy to assist you!