---
title: "What’s New in Blazor Charts: 2022 Volume 1"
published_at: "2022-04-20T12:15:16+00:00"
modified_at: "2025-04-22T12:56:58+00:00"
url: "https://www.syncfusion.com/blogs/post/whats-new-in-blazor-charts-2022-volume-1"
excerpt: "Syncfusion Blazor Charts is a well-crafted charting component for visualizing data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. In this blog, we will go through..."
taxonomy_category:
- "Blazor"
- "Chart"
- "Syncfusion"
- "UI"
- "Web"
- "What's new"
taxonomy_post_tag:
- "Blazor"
- "Charts"
- "Web Development"
- "WebAssembly"
- "What's New"
---
# What’s New in Blazor Charts: 2022 Volume 1
[Gowrimathi S](https://www.syncfusion.com/blogs/author/gowrimathis)
Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts)
is a well-crafted charting component for visualizing data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios.
In this blog, we will go through the new features and improvements included in the Blazor Charts component for the [2022 Volume 1 release](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download)
.
## Border support for area charts
[Area charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart)
are mostly used to represent time-dependent data at equal intervals, showing the trends in the data. Now, you can add borders for these charts: area, spline area, step area, and stacking area.
Refer to the following code example.
```
```
Border Support for Blazor Area Charts
## Filled marker
Markers are mainly used to represent data points with different shapes like circles, rectangles, triangles, or diamonds. Now, you can fill the marker for the data points with the series or data point’s color using the **IsFilled** property of the marker for the series.
Refer to the following code example.
```
```
Filled Marker in Blazor Charts
## Legend item spacing
With 2022 Volume 1, you can easily customize the space between legend items in charts using the **ItemPadding** property.
The following code example shows how to do this.
```
```
Customizing the Space Between the Legends in Blazor Charts
## Highlight on legend hovering
Instead of highlighting the series when hovering the cursor over both the legend and series, you can now set the chart to highlight the series only when hovering over the legend. This will be useful when you want to figure out the series corresponding to the legend item.
Refer to the following code example.
```
```
Highlighting the Blazor Chart Series on Hovering over the Legend
## Pie title placement
Now, the chart title will be placed near the pie and doughnut charts based on their radius. This will enhance the appearance of the charts.
## Tooltip improvements
In this 2022 Volume 1 release, we have improved the appearance of the tooltip and added an animation effect for a smooth transition while moving from one point to another in charts.
Refer to the following GIF image.
Animation Effect for Tooltips in Blazor Charts
## Keyboard navigation
Keyboard accessibility is one of the most important aspects of web accessibility. Users with motor disabilities rely on the keyboard and many users prefer to use the keyboard for navigation to achieve better efficiency.
The Blazor Charts component now supports keyboard navigation, which allows you to interact with the chart elements easily using keys.
The Blazor Charts component supports the following keyboard shortcuts.
| Interaction Keys | Description |
| --- | --- |
| Tab | Moves the focus to the next element in the chart. |
| Shift + Tab | Moves the focus to the previous element in the chart. |
| Down Arrow | Moves the focus to the data point to the left of the selected point. |
| Up Arrow | Moves the focus to the data point to the right of the selected point. |
| Left Arrow | Moves the focus to the next series in the chart. |
| Right Arrow | Moves the focus to the previous series in the chart. |
| ESC | Cancels the tooltip for the data point. |
| Enter/Space | Selects the data point in the series. |
| Down/Left Arrow | Moves the focus to the legend item to the left of the selected legend. |
| Up/Right Arrow | Moves the focus to the legend item to the right of the selected legend item. |
| Enter/Space | Toggles the visibility of the corresponding series. |
| Ctrl + + | Zooms in the chart. |
| Ctrl + – | Zooms out the chart. |
| Down/Up Arrow | Pans the chart vertically after zooming. |
| Right/Left Arrow | Pans the chart horizontally after zooming. |
| R | Resets the zoomed chart. |
| Ctrl + P | Prints the chart. |
## Conclusion
Thanks for reading! In this blog post, we walked through the new features and enhancements in the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts)
component available in 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)
release. Explore the [Blazor Charts user guide](https://blazor.syncfusion.com/documentation/chart/getting-started)
to see all the available features. You can check out the list of new features in our [release notes](https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#chart)
and [What’s New](https://www.syncfusion.com/products/whatsnew/blazor-components)
pages. Try out these stunning new features and leave your feedback in the comments section below!
If you are an existing Syncfusion user, please download the latest version of Essential Studio® from the [License & Downloads](https://www.syncfusion.com/account/downloads)
page and try the new features for yourself. If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
to check out these features.
If you have questions, you can contact us through our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!
[
## Related blogs
- [Syncfusion Essential Studio® 2022 Volume 1 is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-1-is-here.aspx)
- [What’s New in 2022 Volume 1: Blazor](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-1-blazor.aspx)
- [Exploring the Blazor Signature Pad Component](https://www.syncfusion.com/blogs/post/exploring-the-blazor-signature-pad-component.aspx)
- [7 Features of Blazor That Make It an Outstanding Framework for Web Development](https://www.syncfusion.com/blogs/post/7-features-of-blazor-that-make-it-an-outstanding-framework-for-web-development.aspx)