Get Started with Pie Chart for .NET MAUI

• Sep 09, 2024
• 5 minutes to read

This topic explains how to create a sample application that uses the PieChartView to visualize the distribution of the world’s land by country.

View Example: DevExpress Pie Chart for .NET MAUI

Create a Project

1. Create a new .NET MAUI project. Name it PieChartGetStarted.

   If the wizard does not suggest a template for .NET MAUI projects, you can call the following command in a CLI to create a new .NET MAUI project:

   dotnet new maui -n PieChartGetStarted
   

2. Register your personal NuGet package source in Visual Studio. See the following topic for information on how to add the DevExpress NuGet feed to Visual Studio: Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI).

   If you are an active DevExpress Universal customer, DevExpress Controls for .NET MAUI are available in your personal NuGet feed.

3. Install the DevExpress.Maui.Charts package from this feed.

Note

DevExpress Pie Chart for .NET MAUI supports iOS and Android. The project should contain only these platforms.

Add a Pie Chart to the Main Page

In the MauiProgram.cs file, call UseDevExpress and UseDevExpressCharts methods to register a handler for the PieChartView class.

C#

using DevExpress.Maui;
using Microsoft.Maui;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Compatibility.Hosting;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;

namespace PieChartGetStarted {
    public static class MauiProgram {
        public static MauiApp CreateMauiApp() {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseDevExpress()
                .UseDevExpressCharts()
                .ConfigureFonts(fonts => {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("univia-pro-regular.ttf", "Univia-Pro");
                    fonts.AddFont("roboto-bold.ttf", "Roboto-Bold");
                    fonts.AddFont("roboto-regular.ttf", "Roboto");
                })
                .UseMauiCompatibility();

            return builder.Build();
        }
    }
}

In the MainPage.xaml file, define the dx XAML namespace. Then, remove the default content and add an instance of the PieChartView class to the page.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dx="http://schemas.devexpress.com/maui"
             xmlns:local="clr-namespace:PieChartGetStarted"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true"
             x:Class="PieChartGetStarted.MainPage">
    <dx:PieChartView> 
        <!-- ... -->
    </dx:PieChartView>
</ContentPage>

Remove the default content’s event handlers in the code-behind. We also recommend that you remove the default styles (fonts, colors, and other settings) in the App.xaml file.

Populate the Pie Chart with Data

In this example, the chart compares countries by area. Create a ViewModel.cs file with the following classes:

C#

namespace PieChartGetStarted
{
    class ViewModel
    {
        public IReadOnlyList<LandAreaItem> LandAreas { get; }

        public ViewModel()
        {
            LandAreas = new List<LandAreaItem>() 
            {
                new LandAreaItem("Russia", 17.098),
                new LandAreaItem("Canada", 9.985),
                new LandAreaItem("People's Republic of China", 9.597),
                new LandAreaItem("United States of America", 9.834),
                new LandAreaItem("Brazil", 8.516),
                new LandAreaItem("Australia", 7.692),
                new LandAreaItem("India", 3.287),
                new LandAreaItem("Others", 81.2)
            };
            // ...
        }
        // ...
    }
    // ...
    class LandAreaItem
    {
        public string CountryName { get; }
        public double Area { get; }

        public LandAreaItem(string countryName, double area)
        {
            this.CountryName = countryName;
            this.Area = area;
        }
    }
}

In the MainPage.xaml file, add a new DonutSeries object to the PieChartView.Series collection. To bind the series to data, set the DonutSeries.Data property to a PieSeriesDataAdapter object. Use the adapter’s properties to specify the data source and fields that contain values and labels for series points.

XAML

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>

<dx:PieChartView>
    <dx:PieChartView.Series>
        <dx:DonutSeries>
            <dx:DonutSeries.Data>
                <dx:PieSeriesDataAdapter DataSource="{Binding LandAreas}"
                                         LabelDataMember="CountryName"
                                         ValueDataMember="Area"/>
            </dx:DonutSeries.Data>
            <!-- ... -->
        </dx:DonutSeries>
    </dx:PieChartView.Series>
</dx:PieChartView>

Add a Legend to the Pie Chart

Create a Legend object, modify its settings, and assign it to the PieChartView.Legend property.

XAML

<dx:PieChartView>
    <dx:PieChartView.Legend>
        <dx:Legend Orientation="TopToBottom"
                   HorizontalPosition="Center"
                   VerticalPosition="BottomOutside">
                   <!-- ... -->
        </dx:Legend>
    </dx:PieChartView.Legend>
</dx:PieChartView>

Enable Series Labels

Set the DonutSeries.Label property to a PieSeriesLabel object with the specified TextPattern, Position, and Indent settings.

XAML

<dx:PieChartView>
    <dx:PieChartView.Series>
        <dx:DonutSeries.Label>
            <dx:PieSeriesLabel Position="TwoColumns" TextPattern="{}{VP}%" Indent="20">
                <!-- ... -->
            </dx:PieSeriesLabel>
        </dx:DonutSeries.Label>
    </dx:PieChartView.Series>
</dx:PieChartView>

Enable Tooltips for Chart Segments

Set the PieChartView.Hint property to a PieHint object. Set the PieHint.Enabled property to True.

XAML

<dx:PieChartView>
    <dx:PieChartView.Hint>
        <dx:PieHint Enabled="True">
            <!-- ... -->
        </dx:PieHint>
    </dx:PieChartView.Hint>
</dx:PieChartView>

Specify the tooltip pattern for donut segments.

XAML

<dx:DonutSeries.HintOptions>
    <dx:PieSeriesHintOptions PointTextPattern="{}{L}: {V}M sq km"/>
</dx:DonutSeries.HintOptions>

Modify the Pie Chart Appearance

In the view model, define a palette for donut segments.

C#

class ViewModel
{
// ...
    public ViewModel()
    {
    // ...
        palette = PaletteLoader.LoadPalette("#975ba5", "#03bfc1", "#f8c855", "#f45a4e",
                                            "#496cbe", "#f58f35", "#d293fd", "#25a966");
    }
    // ...
    readonly Color[] palette;
    public Color[] Palette => palette;
}
// ...
static class PaletteLoader
{
    public static Color[] LoadPalette(params string[] values)
    {
        Color[] colors = new Color[values.Length];
        for (int i = 0; i < values.Length; i++)
            colors[i] = Color.FromArgb(values[i]);
        return colors;
    }
}

Set the PieChartView.ChartStyle property to a PieChartStyle object with the specified Palette and BackgroundColor properties.

XAML

<dx:PieChartView>
    <dx:PieChartView.ChartStyle>
        <dx:PieChartStyle Palette="{Binding Palette}" 
                          BackgroundColor="#2d313d"/>
    </dx:PieChartView.ChartStyle>
</dx:PieChartView>

Use the PieChartView.SelectionBehavior property to specify how to highlight a donut segment when a user selects it.

XAML

<dx:PieChartView SelectionBehavior="Hatch">
    <!-- ... -->
</dx:PieChartView>

Set the Legend.Style property to a LegendStyle object to change legend appearance. Specify this object’s properties that customize the legend colors, indents, and text size.

XAML

<dx:PieChartView>
    <dx:PieChartView.Legend>
        <dx:Legend>
            <dx:Legend.Style>
                <dx:LegendStyle BorderColor="LightGray" BorderThickness="1"
                                BackgroundColor="#424651"
                                MarkerSize="18" TextIndent="6"
                                ItemsVerticalIndent="12">
                    <dx:LegendStyle.TextStyle>
                        <dx:TextStyle Color="White" Size="12"/>
                    </dx:LegendStyle.TextStyle>
                </dx:LegendStyle>
            </dx:Legend.Style>
        </dx:Legend>
    </dx:PieChartView.Legend>
</dx:PieChartView>

Set the PieSeriesLabel.Style property to a PieSeriesLabelStyle object with the specified TextStyle and ConnectorThickness properties.

XAML

<dx:PieChartView>
    <dx:PieChartView.Series>
        <dx:DonutSeries>
            <dx:DonutSeries.Label>
                <dx:PieSeriesLabel>
                    <dx:PieSeriesLabel.Style>
                        <dx:PieSeriesLabelStyle ConnectorThickness="1">
                            <dx:PieSeriesLabelStyle.TextStyle>
                                <dx:TextStyle Color="#eff2f6" Size="12"/>
                            </dx:PieSeriesLabelStyle.TextStyle>
                        </dx:PieSeriesLabelStyle>
                    </dx:PieSeriesLabel.Style>
                </dx:PieSeriesLabel>
            </dx:DonutSeries.Label>
        </dx:DonutSeries>
    </dx:PieChartView.Series>
</dx:PieChartView>

Use the PieHintStyle.BackgroundColor property to change the hint background color.

XAML

<dx:PieChartView>
    <dx:PieChartView.Hint>
        <dx:PieHint Enabled="True">
            <dx:PieHint.Style>
                <dx:PieHintStyle BackgroundColor="#424651"/>
            </dx:PieHint.Style>
        </dx:PieHint>
    </dx:PieChartView.Hint>
</dx:PieChartView>