What’s New in .NET MAUI Charts: 2022 Volume 3

Rajeshwari Pandinagarajan - Oct 17 '22 - - Dev Community

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 forums, support portal, or feedback portal.

Related blogs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .