Elegantly Visualize Data with the World’s Fastest Blazor Charts
Tags: blazor, csharp, dotnet, webdev
Published: 2021-10-28 11:44:17

---
title: Elegantly Visualize Data with the World’s Fastest Blazor Charts
published: true
date: 2021-10-28 10:00:44 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/elegantly-visualize-data-with-the-worlds-fastest-blazor-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra4lul9aj7lv98nxz4vc.png
---

Blazor Charts control is a feature-rich component to visualize data. Its wide range of functionalities includes data binding, 30+ chart types, animation, tooltip, zooming and panning, crosshair, selection, and highlighting.

In this blog, we are going to discuss the performance improvements made in Blazor Charts for the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3") release. These performance improvements make Syncfusion Blazor Charts the fastest in the world.

## Faster dynamic updates in Blazor Charts

Previously, all elements in Blazor Charts were considered part of a single component and were created with a single builder in the **RenderTreeBuilder** method. Any single change to any chart element would re-render the entire component.

But now, all chart elements, like series, axes, legends, and data labels, are considered individual components and are rendered by overriding the **RenderTreeBuilder** method in their respective classes. This allows you to update any element in a chart exclusively, so you will experience faster updates in the Blazor Charts component.

```js
<SfChart>
<ChartSeriesCollection>
         <ChartSeries>                   
         <ChartMarker Visible="true" Shape="@shape"></ChartMarker>
         </ChartSeries>                   
         <ChartSeries>                   
         <ChartMarker Visible="true" Shape="@shape"></ChartMarker>
         </ChartSeries>                   
 </ChartSeriesCollection>
 </SfChart>

@code{

ChartShape shape = ChartShape.Circle;

void ChangeMarker(ChangeEventArgs args)
    {
        shape = (ChartShape)Enum.Parse(typeof(ChartShape), (string)args.Value);
    }

}
```

Refer to the following GIF image. Here, the change in the marker shape doesn’t affect any other element in the chart.

![Faster Dynamic Updates in Blazor Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Faster-Dynamic-Updates-in-Blazor-Chart.gif)<figcaption>Faster Dynamic Updates in Blazor Charts</figcaption>

## Improved loading performance in Blazor Charts

With the modular architecture, we have drastically reduced Blazor Charts’ loading time and memory consumption. We built Charts to process a lot of data points, including several optimizations to handle them with a smooth user experience.

Refer to the following metrics for the Blazor line chart comparing the 2021 Volume 2 release to the 2021 Volume 3 release.

### Server-side performance metrics

<table>
<tbody>
<tr>
<td><strong>No.of records</strong></td>
<td><strong>Improvements in Volume 3 as compared to Volume 2 (using .NET 5) </strong></td>
</tr>
<tr>
<td>10K</td>
<td>2X</td>
</tr>
<tr>
<td>50K</td>
<td>3X</td>
</tr>
<tr>
<td>100K</td>
<td>3X</td>
</tr>
<tr>
<td>1000K</td>
<td>4X</td>
</tr>
</tbody>
</table>

### WebAssembly performance metrics

With the improved and optimized code, you can see a major difference in loading time for Blazor Charts in WASM applications in this 2021 Volume 3 release.

<table>
<tbody>
<tr>
<td><strong>No.of data points</strong></td>
<td><strong>Improvements in Volume 3 as compared to Volume 2 (using .NET 5) </strong></td>
</tr>
<tr>
<td>10K</td>
<td>2X</td>
</tr>
<tr>
<td>50K</td>
<td>4X</td>
</tr>
<tr>
<td>100K</td>
<td>4X</td>
</tr>
<tr>
<td>1000K</td>
<td>5X</td>
</tr>
</tbody>
</table>

**Note:** For more details, check out the live demo [Example of Performance in the Blazor Charts Component](https://blazor.syncfusion.com/demos/chart/performance?theme=bootstrap5 "Link to Example of Performance in Blazor Charts Component").

## Smooth zooming and panning in Blazor Charts

A good chart should provide smooth zooming and panning experience when dealing with a large volume of data. Now, you can see considerable improvements in zooming and the number of frames per second achieved when panning the Blazor Chart.

As we are changing the series and axis alone, the zooming and panning are smooth compared to the previous version.

![Smooth Zooming and Panning in Blazor Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Smooth-Zooming-and-Panning-in-Blazor-Chart.gif)<figcaption>Smooth Zooming and Panning in Blazor Charts</figcaption>

## Super-fast stock chart

Previously, any change in a chart, like adding an indicator or trendline, would re-render the entire stock chart again. But now, a change to the stock chart doesn’t re-render the entire component. It just updates the required changes. This makes the stock chart update instant. ** **

![Super-Fast Blazor Stock Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Super-Fast-Blazor-Stock-Chart.gif)<figcaption>Super-Fast Blazor Stock Chart</figcaption>

## Performance tips

Even though we improved Blazor Charts’ performance at the source level, it is highly recommended to follow these tips on the app to fully utilize the improvement:

- Don’t use markers and data labels. Instead, use a tooltip or trackball to display data information.
- Avoid a category axis. Make use of numeric and date-time axes for large amounts of data.
- Use the line series for the fastest performance.

## Conclusion

Thanks for reading! In this blog post, we have seen the various improvements made in Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Link to Blazor Charts") for the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3") release. You can read more about the release in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v19.3.0.43 "Link to Syncfusion release notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Link to Syncfusion What's New") pages. If you have any questions about the Blazor Charts component, please let us know in the comments section below.

For existing customers, the newest version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [What’s New in 2021 Volume 3: Blazor](https://dev.to/sureshmohan/what-s-new-in-2021-volume-3-blazor-21jh-temp-slug-8656328 "Link to What’s New in 2021 Volume 3: Blazor blog")
- [Easily Visualize Online Maps in a Blazor Application](https://dev.to/syncfusion/easily-visualize-online-maps-in-a-blazor-application-426n "Link to Easily Visualize Online Maps in a Blazor Application blog")
- [Easily Import and Export RTF Files in Blazor with Accuracy](https://dev.to/karthickramasamy08/easily-import-and-export-rtf-files-in-blazor-with-accuracy-3145-temp-slug-3854859 "Link to Easily Import and Export RTF Files in Blazor with Accuracy blog")
- [Performing CRUD Operations Using Google Firebase and Blazor [Webinar Show Notes]](https://dev.to/karthickramasamy08/performing-crud-operations-using-google-firebase-and-blazor-webinar-show-notes-15k1-temp-slug-8997341 "Link to Performing CRUD Operations Using Google Firebase and Blazor [Webinar Show Notes] blog")