Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (156).NET Core  (27).NET MAUI  (27)Angular  (64)ASP.NET  (48)ASP.NET Core  (71)ASP.NET MVC  (88)Azure  (30)Blazor  (128)DocIO  (22)Essential JS 2  (76)Essential Studio  (168)File Formats  (25)Flutter  (121)JavaScript  (165)Microsoft  (107)PDF  (64)React  (43)Succinctly series  (126)Syncfusion  (533)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (29)Windows Forms  (57)WinUI  (38)WPF  (131)Xamarin  (142)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (55)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (53)Development  (319)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (9)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (267)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (33)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (20)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (87)UI  (181)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (289)What's new  (176)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
What's New in Blazor Charts: 2022 Volume 1

What’s New in Blazor Charts: 2022 Volume 1

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 the new features and improvements included in the Blazor Charts component for the 2022 Volume 1 release.

Border support for area charts

Area charts 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.

<ChartSeriesCollection>
 <ChartSeries Type="ChartSeriesType.SplineArea">
  <ChartSeriesBorder Width="2"></ChartSeriesBorder>
 </ChartSeries>
 <ChartSeries Type="ChartSeriesType.SplineArea">
  <ChartSeriesBorder Width="2"></ChartSeriesBorder>
 </ChartSeries>
</ChartSeriesCollection>
Border Support for Blazor Area Charts
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.

<ChartSeries Type="ChartSeriesType.Line">
 <ChartMarker Visible="true" IsFilled="true" Shape="ChartShape.Triangle">
 </ChartMarker>
</ChartSeries>
Filled Marker in Blazor Charts
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.

<ChartLegendSettings ItemPadding="30"></ChartLegendSettings>
Customizing the Space Between the Legends in Blazor Charts
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.

<ChartLegendSettings Enablehighlight="true"></ChartLegendSettings>
Highlighting the Blazor Chart Series on Hovering over the Legend
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.

Smart Title Placement for Blazor Pie and Doughnut ChartsTooltip 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
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 KeysDescription
TabMoves the focus to the next element in the chart.
Shift + TabMoves the focus to the previous element in the chart.
Down ArrowMoves the focus to the data point to the left of the selected point.
Up ArrowMoves the focus to the data point to the right of the selected point.
Left ArrowMoves the focus to the next series in the chart.
Right ArrowMoves the focus to the previous series in the chart.
ESCCancels the tooltip for the data point.
Enter/SpaceSelects the data point in the series.
Down/Left ArrowMoves the focus to the legend item to the left of the selected legend.
Up/Right ArrowMoves the focus to the legend item to the right of the selected legend item.
Enter/SpaceToggles the visibility of the corresponding series.
Ctrl + +Zooms in the chart.
Ctrl + –Zooms out the chart.
Down/Up ArrowPans the chart vertically after zooming.
Right/Left ArrowPans the chart horizontally after zooming.
RResets the zoomed chart.
Ctrl + PPrints the chart.

Conclusion

Thanks for reading! In this blog post, we walked through the new features and enhancements in the Blazor Charts component available in our 2022 Volume 1 release. Explore the Blazor Charts user guide to see all the available features. You can check out the list of new features in our release notes and What’s New 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 page and try the new features for yourself. If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

If you have questions, you can contact us through our support forum,  support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top