What’s New in .NET MAUI Charts: 2022 Volume 3 | Syncfusion Blogs
Detailed Blog page Skeleton loader
What’s New in .NET MAUI Charts 2022 Volume 3

The .NET MAUI Charts control is a well-crafted charting control for visualizing data. It contains a rich gallery of 10+ charts and graphs that cater to all charting scenarios.

In this blog post, I’ll quickly introduce the new features included in the .NET MAUI Charts control for the 2022 Volume 3 release.

Logarithmic axis

When the largest and smallest values in a data collection are hundreds or even thousands of units apart, the logarithmic scale can be used to describe the data interval.

Our Syncfusion .NET MAUI Charts now support rendering a logarithmic axis. It can compactly display numerical data over a large range of values.

The following code example shows how to configure a logarithmic axis in a .NET MAUI Cartesian Chart.

Xaml

<chart:SfCartesianChart>
 
 <chart:SfCartesianChart.XAxes>
   <chart:LogarithmicAxis/>
 </chart:SfCartesianChart.XAxes>
 
 <chart:SfCartesianChart.YAxes>
   <chart:LogarithmicAxis/>
 </chart:SfCartesianChart.YAxes>
 
</chart:SfCartesianChart>
Logarithmic axis support in .NET MAUI Charts
Logarithmic axis support in .NET MAUI Charts

Series selection and multiselection

The .NET MAUI Charts control’s selection behavior highlights a particular element [data point or series] on the chart. In other words, this behavior selects a segment or series.

The following code shows how to configure series selection in a chart.

Xaml

<chart:SfCartesianChart>
 . . .
 <chart:SfCartesianChart.SelectionBehavior>
   <chart:SeriesSelectionBehavior SelectionBrush="Green"/>
 </chart:SfCartesianChart.SelectionBehavior>
 
 <!--Series collection.-->
 
</chart:SfCartesianChart>

And the next code shows how to enable the selection of multiple series in .NET MAUI Charts.

Xaml

<chart:SfCartesianChart>
 . . .
 <chart:SfCartesianChart.SelectionBehavior>
  <chart:SeriesSelectionBehavior Type="Multiple"/>
 </chart:SfCartesianChart.SelectionBehavior>
 
 <!--Series collection.-->
 
</chart:SfCartesianChart>
Series selection and multiselection feature in .NET MAUI Charts
Series selection and multiselection feature in .NET MAUI Charts

Explode segment on touch

Now, you can pop out a particular segment of a circular chart (pie and doughnut) with a touching or tapping interaction. The following code example shows how to configure a segment to explode on touch.

Xaml

<chart:SfCircularChart>
 . . .
 <chart:DoughnutSeries ExplodeOnTouch="True" />
</chart:SfCircularChart>
Explode a segment using touch interaction in .NET MAUI Circular Chart
Explode a segment using touch interaction in .NET MAUI Circular Chart

View in center of doughnut charts

You can place any view in the middle of a doughnut chart. This helps us show more information about the chart data. The following code example shows how to configure the doughnut chart’s center view.

Xaml

<chart:SfCircularChart>
 <chart:SfCircularChart.Series>
  <chart:DoughnutSeries ItemsSource="{Binding DoughnutSeriesData}" XBindingPath="Name" YBindingPath="Value"/>
   <chart:DoughnutSeries.CenterView>
   <Label Text = "{Binding Total, Source={x:Reference doughnutViewModel}}"/>
  </chart:DoughnutSeries.CenterView>
 </chart:SfCircularChart.Series>
</chart:SfCircularChart>
Adding a View at the Center of a .NET MAUI Doughnut Chart
Adding a View at the Center of a .NET MAUI doughnut chart

Chart plot area background

Add any view to the chart area. This comes in handy for including relevant information, a watermark, or a color gradient in the chart’s background area.

The following code example shows how to configure the .NET MAUI Cartesian Chart’s plot area background view.

Xaml

<chart:SfCartesianChart>
 <chart:SfCartesianChart.PlotAreaBackgroundView>
  <AbsoluteLayout>
    <Label Text=" Copyright © 2001 - 2022 Syncfusion Inc "
           FontSize="18"
           AbsoluteLayout.LayoutBounds="1,1,-1,-1"
           AbsoluteLayout.LayoutFlags="PositionProportional"
           Opacity="0.4" />
    <Label Text="CONFIDENTIAL"
           Rotation="340"
           AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
           AbsoluteLayout.LayoutFlags="PositionProportional"
           Opacity="0.3" />
  </AbsoluteLayout>
 </chart:SfCartesianChart.PlotAreaBackgroundView>
</chart:SfCartesianChart>
Adding a view at the chart plot area background
Adding a view at the chart plot area background

Conclusion

Thanks for reading! We have seen the new features added to the Syncfusion .NET MAUI Charts for the 2022 Volume 3 release. Use these features to make your chart data more readable.

You can get additional details about every new feature in this Volume 3 by reading our release notes and What’s New pages. Have a look at our .NET MAUI Charts GitHub demos and documentation.

Submit your questions or feature requests in the comments section below. You can also reach us through our support forumssupport portal, or feedback portal.

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Be the first to get updates

Saravanan Madheswaran

Meet the Author

Saravanan Madheswaran

Software Engineer | .NET developer since 2018, working on custom control development for Microsoft technologies.