Build Interactive Doughnut Charts in .NET MAUI for Mobile Dashboards

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.

Understanding .NET MAUI Doughnut Chart customization and its 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. They offer features like CenterView, StartAngle, EndAngle, GapRatio, CapStyle, custom palettes and colors, segment selection and highlighting, and tooltips and labels.

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.

<chart:DoughnutSeries
    InnerRadius="0.55"
    StartAngle="20"
    EndAngle="380"
    GapRatio="0.05">
</chart:DoughnutSeries>

Refer to the following image.

Note: For more details, refer to the user guide for the GapRatio property.

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 LabelTemplate allows 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.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Try It Free

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!