TL;DR: Dive into the world of data visualization with Doughnut Charts in the .NET MAUI Toolkit. This in-depth guide walks you through customizing charts using real-world freshwater resource data, enhancing aesthetics and user interaction. Learn how to apply advanced features like CapStyle, GapRatio, angle customization, and CenterView to create visually compelling and highly interactive charts. This toolkit is perfect for developers looking to elevate their cross-platform UI design and deliver meaningful insights through intuitive charting components.
Welcome to our Chart of the Week blog series!
Developers often struggle to present proportional data in a visually engaging way. Doughnut Charts in .NET MAUI offer a flexible solution with deep customization options.
In this blog , we’ll show you how to visualize freshwater resource data using advanced Doughnut Chart customization features available in Syncfusion .NET MAUI Toolkit, including CenterView, CapStyle, and GapRatio.
Why choose Syncfusion .NET MAUI Toolkit Charts for data visualization?
The Syncfusion .NET MAUI Toolkit is a free, open-source library offering robust UI components for cross-platform development. Its flexibility and cost-effectiveness make it ideal for developers aiming to build visually rich and interactive applications.
By exploring this toolkit, you can elevate your app’s data visualization capabilities and deliver exceptional user experiences.
Understanding Doughnut Charts and their customization potential
A doughnut chart is a variation of a pie chart, featuring a central hollow space that can be used for additional visuals or data. While great for showing composition, its real strength lies in its customizability.
The Syncfusion .NET MAUI Toolkit offers a rich set of properties tailored specifically for the doughnut chart, allowing you to fine-tune its appearance and behavior.
Doughnut Charts help in real-world scenarios
Customized doughnut charts are powerful tools for various scenarios, allowing you to present data with clarity and visual appeal. They offer features like CenterView , StartAngle, EndAngle, GapRatio, CapStyle, custom palettes and colors, segment selection and highlighting, and tooltips and labels.
Here are some real-world applications:
- Dashboard summaries: Displaying key performance indicators (KPIs) like task completion rates, budget allocation, or resource utilization with a central metric in the CenterView.
- Progress tracking: Using StartAngle and EndAngle to create partial doughnuts that visually represent progress towards a goal (e.g., project completion percentages, fundraising targets).
- Survey results: Presenting responses to multiple-choice questions, where GapRatio can differentiate between answer choices and CapStyle can add visual flair.
- Resource allocation: Showing how resources are divided across different departments or initiatives, with the CenterView summarizing the total resources.
- Market share analysis: Illustrating the market share of different products or companies, where individual segments can be clearly distinguished using GapRatio..
Step 1: Building your .NET MAUI Toolkit Doughnut Chart series
First, gather the freshwater resource data from the World Bank, specifically the dataset titled Renewable internal freshwater resources, total ( billion cubic meters )
With your data prepared and the chart configured, incorporating the data into a DoughnutSeries is straightforward. The DoughnutSeries is implicitly part of the SfCircularChart. We will bind the ItemsSource, XBindingPath, and YBindingPath properties to your FreshWaterResourcesData to display the country and its percentage share effectively.
<chart:SfCircularChart>
<chart:DoughnutSeries
ItemsSource="{Binding FreshWaterResourcesData}"
XBindingPath="Country"
YBindingPath="Percentage"
ShowDataLabels="True"
EnableTooltip="True">
</chart:DoughnutSeries>
</chart:SfCircularChart>
Refer to the following image.
Note: To learn how to implement the Circular Charts, refer to the official documentation. For detailed guidance on data binding, check out the GitHub demo.
Step 2: Adding the chart title
The title of a chart is crucial for providing context and capturing users’ attention. You can define it using the Title property within the SfCircularChart.
<chart:SfCircularChart.Title>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Path Margin="0,10" Grid.Column="0" Grid.Row="0"
Data="{StaticResource PathData}"
Fill="Gray"
HeightRequest="35"
WidthRequest="30"
VerticalOptions="Center"/>
<Label Margin="0,10" Grid.Column="1" Grid.Row="0"
Text="Ranking of Countries by Freshwater Resources in 2021"
FontSize="{OnPlatform Default=26,Android=20,iOS=20}"
FontAttributes="Bold"
VerticalOptions="Center"
HorizontalOptions="Start"/>
</Grid>
</chart:SfCircularChart.Title>
Step 3: Customizing the Doughnut Chart’s center view
CenterView allows embedding custom content in the doughnut’s hollow center. This space can be leveraged to display:
- Aggregate data: Show the total value represented by all segments.
- Contextual icons or images: Add a relevant image or icon that symbolizes the data being presented.
- Branding: Incorporate a company logo or an application-specific visual. This feature is invaluable for providing immediate context or a visual focal point, making the chart more informative and visually appealing.
<chart:DoughnutSeries>
<chart:DoughnutSeries.CenterView>
<Border HeightRequest="{Binding CenterHoleSize}" WidthRequest="{Binding CenterHoleSize}" Stroke="Transparent">
<Path Grid.Column="0"
Data="{StaticResource CenterViewPathData}"
Fill="#4dacff"
Stroke="LightGray"
StrokeThickness="1"
HeightRequest="{OnPlatform Default=165,Android=100,iOS=100}"
WidthRequest="{OnPlatform Default=165,Android=100,iOS=100}"
HorizontalOptions="Center"
VerticalOptions="Center">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<ScaleTransform ScaleX="{OnPlatform Default=5,Android=3,iOS=3}" ScaleY="{OnPlatform Default=5,Android=3,iOS=3}"/>
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Border>
</chart:DoughnutSeries.CenterView>
</chart:DoughnutSeries>
Refer to the following image.
Step 4: Angle and GapRatio customization
The DoughnutSeries offers key properties for visual distinctiveness. By applying StartAngle, EndAngle, and GapRatio, you control the arc and spacing of the segments.
-
Angle Customization: The StartAngle and EndAngle properties define where the doughnut chart begins and ends, giving you control over its arc:
- Create Partial Doughnuts: These are useful for progress indicators or gauges. You can display just a segment instead of a full circle.
- Introduce Visual Dynamics: Rotate the chart to align with design needs or highlight specific segments by positioning them at key angles.
-
GapRatio: The GapRatio property controls the spacing between doughnut segments. This feature is excellent for:
- Enhancing Readability: Adding space between slices makes it easier to distinguish individual segments.
- Creating Visual Emphasis: Helps prevent the chart from looking crowded, especially when there are many categories.
- Customizable Spacing: You can adjust the ratio to fine-tune how much separation appears between segments, enhancing clarity without compromising design.
Note: For more details refer to the user guidefor the GapRatio property.
<chart:DoughnutSeries
InnerRadius="0.55"
StartAngle="20"
EndAngle="380"
GapRatio="0.05">
</chart:DoughnutSeries>
Refer to the following image.
Step 5: DataLabel and Tooltip customization
The DoughnutSeries supports highly customizable LabelTemplate and TooltipTemplate, allowing you to define the visual layout, styling, and content of data labels and tooltips using XAML.
Data Label Template: The DataLabelSettings LabelTemplateallows full customization of each doughnut segment’s label by defining a DataTemplate to control its visual appearance.
<DataTemplate x:Key="labelTemplate">
<HorizontalStackLayout Spacing="5">
<Label Text="{Binding Item.Country}"
FontSize="Body"
FontAttributes="Bold"/>
<Label Text=": "
FontSize="Body"/>
<Label Text="{Binding Item.Percentage, StringFormat='{0}%'}"
FontSize="Body"
FontAttributes="Bold"/>
</HorizontalStackLayout>
</DataTemplate>
<chart:DoughnutSeries LabelTemplate="{StaticResource labelTemplate}">
<chart:DoughnutSeries.DataLabelSettings>
<chart:CircularDataLabelSettings LabelPosition="Outside" SmartLabelAlignment="Shift">
<chart:CircularDataLabelSettings.ConnectorLineSettings>
<chart:ConnectorLineStyle ConnectorType="Curve" />
</chart:CircularDataLabelSettings.ConnectorLineSettings>
</chart:CircularDataLabelSettings>
</chart:DoughnutSeries.DataLabelSettings>
</chart:DoughnutSeries>
TooltipTemplate: Defines the content and appearance of the tooltip that appears when a user interacts with a doughnut segment. This is ideal for displaying detailed information like country, cubic meters, and percentage in a customized layout.
<DataTemplate x:Key="tooltipTemplate">
<VerticalStackLayout >
<HorizontalStackLayout >
<Border Stroke="White"
StrokeThickness="1"
StrokeShape="RoundRectangle 15">
<Image Source="{Binding Item.IconName}"
VerticalOptions="Center"
HorizontalOptions="Center"/>
</Border>
<Label Text="{Binding Item.Country}"
FontAttributes="Bold"
</HorizontalStackLayout>
<BoxView VerticalOptions="Center"
HeightRequest="1.5"
Margin="0,2"/>
<Label Text="{Binding Item.CubicMeters, StringFormat='{0:N0} Billion m³'}"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</VerticalStackLayout>
</DataTemplate>
<chart:DoughnutSeries TooltipTemplate="{StaticResource tooltipTemplate}">
</chart:DoughnutSeries>
These customizations collectively transform a basic chart into a powerful visualization tool, capable of highlighting insights effectively while offering engaging user experience.
Refer to the following image.
Additional customization options
- The GroupTo feature allows you to aggregate small segments with values below a specified threshold into a single, consolidated “Other” segment.
- Prevents Clutter: Group less significant data points to keep the chart clean and focused.
- Focuses on Key Data: Ensure major categories stand out by minimizing visual noise.
- Flexible Aggregation: Use GroupMode to group by value or percentage, depending on what best suits your data.
- The CapStyle property defines how the edges of each doughnut segment appear.
- BothFlat: Sharp edges for a clean, sharp look.
- BothCurve: Rounded edges for a softer, more modern feel.
- StartCurve / EndCurve: Applies a rounded or curved edge to the start and end of each doughnut segment.
Note: For more details refer to the user guide for the CapStyle property.
GitHub reference
For more details, refer to the GitHub demo *. *
FAQs
Q1: What kind of data can be visualized with the Syncfusion .NET MAUI Doughnut Chart?
You can visualize any categorical data like market share, survey results, budget allocation, or any proportional data.
Q2: Is the Syncfusion .NET MAUI Toolkit Doughnut Chart suitable for real-time data visualization?
Yes, the Syncfusion .NET MAUI Toolkit charts are designed for performance and can handle real-time data updates efficiently.
Q3: Can I add interactive elements to the Doughnut Chart, like selection or click events?
Absolutely. Syncfusion .NET MAUI Doughnut Charts support various interactive features, including selection, tooltips, and tap/click events.
Conclusion
Thank you for reading! In this blog, we’ve explored how to use the Syncfusion .NET MAUI Toolkit to create a Doughnut Chart that showcases freshwater resource data. We strongly encourage you to follow the steps outlined and share your feedback in the comments section below.
If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.
You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!
Related Blogs
- Visualizing Skyscraper Data with .NET MAUI Doughnut Chart and Maps
- Create a Flutter Semi-Doughnut Chart to Visualize Transport Emissions per Kilometer Traveled
- Creating a WPF Doughnut Chart to Visualize the New European Parliament’s Composition in 2024
- Chart of the Week: Creating a .NET MAUI Doughnut Chart to Visualize the World’s Biggest Oil Producers
This article was originally published at Syncfusion.com.
Top comments (0)