Chart of the Week: Creating a .NET MAUI Doughnut Chart to Visualize the World’s Biggest Oil Producers
Tags: dotnetmaui, chart, maui, datavisualization
Published: 2024-07-08 15:35:27

---
title: Chart of the Week: Creating a .NET MAUI Doughnut Chart to Visualize the World’s Biggest Oil Producers
published: true
date: 2024-06-26 13:59:30 UTC
tags: dotnetmaui, chart, maui, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/maui-doughnut-chart-oil-producers
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnlgbdybyu1vc07lmaiy.png
---
**TL;DR:** Let’s craft a .NET MAUI Doughnut Chart to visualize the 2023 oil production data. We cover data preparation, chart configuration, and customization steps to create an interactive and visually appealing chart.

Welcome to our **Chart of the Week** blog series!

Today, we’ll visualize the world’s biggest oil producers in 2023 using Syncfusion’s [.NET MAUI Doughnut Chart](https://www.syncfusion.com/maui-controls/maui-circular-charts/chart-types/maui-doughnut-chart ".NET MAUI Doughnut Chart").

Despite ongoing efforts to decarbonize the global economy, oil remains one of the world’s most vital resources. It’s produced by a relatively small group of countries, granting them significant economic and political leverage.

This graphic illustrates global crude oil production in 2023, measured in million barrels per day, sourced from the U.S. Energy Information Administration [(EIA)](https://www.eia.gov/international/data/world/petroleum-and-other-liquids/monthly-petroleum-and-other-liquids-production "U.S. Energy Information Administration").

The following image shows the Doughnut Chart we’re going to create. 

![Visualizing the world’s biggest oil producers’ data using the Syncfusion .NET MAUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Visualizing-the-worlds-biggest-oil-producers-data-using-the-Syncfusion-.NET-MAUI-Doughnut-Chart-1024x515.png)

Let’s get started!

## Step 1: Gather oil production data 

Before creating the .NET MAUI Doughnut Chart, we need to gather data from the U.S. Energy Information Administration [(EIA)](https://www.eia.gov/international/data/world/petroleum-and-other-liquids/monthly-petroleum-and-other-liquids-production "U.S. Energy Information Administration"). We can also download the data in CSV format. 

## Step 2: Prepare the data for the Doughnut Chart

Then, we need to organize our data properly. This involves creating an **OilProductionModel** class, which defines the structure of our oil production data, and a **WorldOilProduction** class, which handles the data manipulation and communication between the model and the Doughnut Chart.

The data model represents the data we want to visualize. It could contain the properties to store the details such as the country name, oil production value, and country flag image.

```csharp
public class OilProductionModel
{
        public string Country { get; set; }
        public double Production { get; set; }
        public string FlagImage { get; set; }
        public OilProductionModel(string country, double production, string flagImage)
        {
            Country = country;
            Production = production;
            FlagImage = flagImage;
        }
}
```

Now, create the **WorldOilProduction** class, which acts as an intermediary between the data models and the user interface elements (Doughnut Chart), preparing and formatting data for display and interaction.

Additionally, we need to configure the properties to update the exploding segment values in the center view labels.

```csharp
public class WorldOilProduction : INotifyPropertyChanged
{
    public List<OilProductionModel> ProductionDetails { get; set; }
    public List<Brush> PaletteBrushes { get; set; }
    private double productionValue;
    public double ProductionValue
    {
        get
        {
            return productionValue;
        }
        set
        {
            productionValue = value;
            NotifyPropertyChanged(nameof(ProductionValue));
        }
    }
    private string countryName;
    public string CountryName
    {
        get
        {
            return countryName;
        }
        set
        {
            countryName = value;
            NotifyPropertyChanged(nameof(CountryName));
        }
    }
    int explodeIndex = 1;
    public int ExplodeIndex
    {
        get
        {
            return explodeIndex;
        }
        set
        {
            explodeIndex = value;
            UpdateIndexValues(value);
            NotifyPropertyChanged(nameof(ExplodeIndex));
        }
    }
    public WorldOilProduction()
    {
        ProductionDetails = new List<OilProductionModel>(ReadCSV());
        PaletteBrushes = new List<Brush>
        {
            new SolidColorBrush(Color.FromArgb("#583101")),
            new SolidColorBrush(Color.FromArgb("#603808")),
            new SolidColorBrush(Color.FromArgb("#6f4518")),
            new SolidColorBrush(Color.FromArgb("#8b5e34")),
            new SolidColorBrush(Color.FromArgb("#a47148")),
            new SolidColorBrush(Color.FromArgb("#bc8a5f")),
            new SolidColorBrush(Color.FromArgb("#d4a276")),
            new SolidColorBrush(Color.FromArgb("#e7bc91")),
            new SolidColorBrush(Color.FromArgb("#f3d5b5")),
            new SolidColorBrush(Color.FromArgb("#FFEDD8"))
        };
    }
    public event PropertyChangedEventHandler PropertyChanged;
    public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private void UpdateIndexValues(int value)
    {
        if (value >= 0 && value < ProductionDetails.Count)
        {
            var model = ProductionDetails[value];
            if (model != null && model.Country != null)
            {
                ProductionValue = model.Production;
                CountryName = model.Country;
            }
        }        
    }
}
```

Then, convert the CSV data into a data collection using the **ReadCSV** method. 

```csharp
public IEnumerable<OilProductionModel> ReadCSV()
{
     Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
     Stream inputStream = executingAssembly.GetManifestResourceStream("OilProductionChart.Resources.Raw.data.csv");
     string? line;
     List<string> lines = new List<string>();
     using StreamReader reader = new StreamReader(inputStream);
     while ((line = reader.ReadLine()) != null)
     {
        lines.Add(line);
     }
     return lines.Select(line =>
     {
        string[] data = line.Split(',');
        return new OilProductionModel(data[1], Convert.ToDouble(data[2]), data[3]);
     });
}
```

## Step 3: Configure the Syncfusion .NET MAUI Doughnut Chart

Let’s configure the .NET MAUI Doughnut Chart control using this [documentation](https://help.syncfusion.com/maui/circular-charts/getting-started "Getting started with .NET MAUI Charts").

Refer to the following code example.

```xml
<ContentPage
    . . .
    xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    <chart:SfCircularChart>
       . . .
        <chart:DoughnutSeries>
            . . .
        </chart:DoughnutSeries>
    </chart:SfCircularChart>
</ContentPage>
```

## Step 4: Bind the data to .NET MAUI Doughnut Series

To effectively display the oil production data, we’ll use the Syncfusion **DoughnutSeries** instance and bind our **ProductionDetails** collection to the chart.

Refer to the following code example. 

```xml
<chart:SfCircularChart>
   . . .
    <chart:DoughnutSeries ItemsSource="{Binding ProductionDetails}" 
                          XBindingPath="Country" 
                          YBindingPath="Production"/>
</chart:SfCircularChart>
```

In the above code, the **ProductionDetails** collection from the **WorldOilProduction** ViewModel is bound to the **ItemSource** property. The **XBindingPath** and **YBindingPath** properties are bound to the **Country** and **Production** properties, respectively.

## Step 5: Customize the .NET MAUI Doughnut Chart appearance

Let’s customize the appearance of the .NET MAUI Doughnut Chart to enhance its readability.

### **Adding the chart title**

Adding a [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title "Title property of .NET MAUI Doughnut Chart") helps users understand the content of the chart more effectively. Refer to the following code example to customize the chart title.

```xml
<chart:SfCircularChart.Title>
    <Grid Margin="4,5,0,0" >
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="55"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Grid.RowSpan="2" 
                Source="oil.png" 
                Margin="0,-5,0,0" 
                HeightRequest="60" 
                WidthRequest="60"/>
        <StackLayout Grid.Column="1" Grid.Row="0" Margin="0,10,0,0">
            <Label Text="The World's Biggest Oil Producers in 2023"   
                    Margin="0,0,0,6"
                    FontSize="22"    
                    FontFamily="centurygothic"
                    FontAttributes="Bold"  
                    TextColor="Black"/>
            <Label Text="Crude Oil Production (Million barrels per day)"   
                    FontSize="18"      
                    FontFamily="centurygothic"
                    TextColor="Black"  
                    Margin="0,2,0,0"/>
        </StackLayout>
    </Grid>
</chart:SfCircularChart.Title>
```

### Customize the doughnut series

Refer to the following code example to customize the doughnut series using the [Radius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_Radius "Radius property of .NET MAUI Doughnut Chart"), [InnerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DoughnutSeries.html#Syncfusion_Maui_Charts_DoughnutSeries_InnerRadius "InnerRadius property of .NET MAUI Doughnut Chart"), [PaletteBrushes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes "PaletteBrushes property of .NET MAUI Doughnut Chart"), and other properties. 

```xml
<chart:DoughnutSeries ItemsSource="{Binding ProductionDetails}"                                  
                      XBindingPath="Country" 
                      YBindingPath="Production"
                      ShowDataLabels="True"                      
                      PaletteBrushes="{Binding PaletteBrushes}"
                      Radius="{OnPlatform Android=0.6,Default=0.65,iOS=0.5}"
                      InnerRadius="0.5"/>
```

### Customize the data labels 

Let’s customize the data labels using the [LabelTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_LabelTemplate "LabelTemplate property of .NET MAUI Doughnut Chart") support. Using the [LabelContext](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LabelContext.html "LabelContext property of .NET MAUI Doughnut Chart"), we can tailor the label content to display the percentage value of the corresponding data point. Additionally, use the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Charts_CircularDataLabelSettings_SmartLabelAlignment "SmartLabelAlignment property of .NET MAUI Doughnut Chart") property to arrange the data labels intelligently, preventing them from overlapping.

Refer to the following code example. 

```xml
<chart:SfCircularChart x:Name="chart" Margin="{OnPlatform Default='0,0,0,0',iOS='-35,0,0,0'}" >
    <chart:SfCircularChart.Resources>
        <DataTemplate x:Key="labelTemplate">
            <HorizontalStackLayout Spacing="5">
                <Image Source="{Binding Item.FlagImage}" VerticalOptions="Center" HeightRequest="{OnPlatform Android=20,Default=30,iOS=20}" WidthRequest="{OnPlatform Android=20,Default=30,iOS=20}" />
                <Label Text="{Binding Item.Country}" VerticalOptions="Center" FontFamily="centurygothic" FontSize="{OnPlatform Android=15,Default=20,iOS=15}"/>
                <Label Text="{Binding Item.Production,StringFormat=': {0}%'}" Margin="-4,0,0,0" VerticalOptions="Center" FontFamily="centurygothic" FontSize="{OnPlatform Android=15,Default=20,iOS=15}"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </chart:SfCircularChart.Resources>
    . . .
    <chart:DoughnutSeries ItemsSource="{Binding ProductionDetails}"                                  
                          XBindingPath="Country" 
                          YBindingPath="Production"
                          ShowDataLabels="True"  
                          LabelContext="Percentage"
                          LabelTemplate="{StaticResource labelTemplate}"
                          PaletteBrushes="{Binding PaletteBrushes}"
                          Radius="{OnPlatform Android=0.6,Default=0.65,iOS=0.5}"
                          InnerRadius="0.5">
        <chart:DoughnutSeries.DataLabelSettings>
            <chart:CircularDataLabelSettings SmartLabelAlignment="Shift" LabelPosition="Outside">
                <chart:CircularDataLabelSettings.ConnectorLineSettings>
                    <chart:ConnectorLineStyle ConnectorType="Line" StrokeWidth="3"></chart:ConnectorLineStyle>
                </chart:CircularDataLabelSettings.ConnectorLineSettings>
            </chart:CircularDataLabelSettings>
        </chart:DoughnutSeries.DataLabelSettings>
    </chart:DoughnutSeries>
</chart:SfCircularChart>
```

### Adding a center view to the Doughnut Chart

Now, configure the [CenterView ](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DoughnutSeries.html#Syncfusion_Maui_Charts_DoughnutSeries_CenterView "CenterView property of .NET MAUI Doughnut Chart")property to add content about the selected data segment’s oil production at the center of the chart.

Refer to the following code example.

```xml
<chart:DoughnutSeries.CenterView>
    <VerticalStackLayout Spacing="{OnPlatform Android=3.5,Default=7,iOS=3.5}">
        <Image HorizontalOptions="Center" 
                Opacity="0.8"
                HeightRequest="{OnPlatform Android=15,Default=50,iOS=15}"
                WidthRequest="{OnPlatform Android=15,Default=50,iOS=15}"
                Margin="{OnPlatform Default='5,0,0,0', Android='2.5,0,0,0'}"
                Source="oildrum.png"/>
        <Label HorizontalOptions="Center" FontFamily="centurygothic" FontAttributes="Bold" FontSize="{OnPlatform Android=10,Default=21,iOS=10}" Text="{Binding CountryName,Source={x:Reference worldOilProduction}}"/>
        <Label HorizontalOptions="Center" FontFamily="centurygothic" FontAttributes="Bold" FontSize="{OnPlatform Android=10,Default=20,iOS=10}" Text="{Binding ProductionValue,Source={x:Reference worldOilProduction},StringFormat='{0}M'}" />
    </VerticalStackLayout>
</chart:DoughnutSeries.CenterView>
```

### Add interactive features

Using the [ExplodeOnTouch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html#Syncfusion_Maui_Charts_PieSeries_ExplodeOnTouch "ExplodeOnTouch property of .NET MAUI Doughnut Chart") property, we can add interactive features to view the data for the exploded segment in our Chart. Exploding a segment helps pull attention to a specific area of the Chart.

Here, we’ll bind the  **ExplodeIndex** property to the series center view to show additional information about the data.

Refer to the following code example.

```xml
<chart:DoughnutSeries ItemsSource="{Binding ProductionDetails}"                                  
                      XBindingPath="Country" 
                      YBindingPath="Production"
                      . . .
                      ExplodeOnTouch="True"
                      ExplodeIndex="{Binding ExplodeIndex,Mode=TwoWay}"/>
```

After executing the above code examples, we will get the output that resembles the following image. 
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Visualizing-the-worlds-biggest-oil-producers-data-using-the-Syncfusion-.NET-MAUI-Doughnut-Chart.gif" alt="Visualizing the world’s biggest oil producers’ data using the Syncfusion .NET MAUI Doughnut Chart" style="width:100%">

  <figcaption>Visualizing the world’s biggest oil producers’ data using the Syncfusion .NET MAUI Doughnut Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to visualizing the world’s biggest oil producers in 2023 using the .NET MAUI Doughnut Chart [GitHub demo](https://github.com/SyncfusionExamples/Creating-the-.NET-MAUI-Pie-Chart-to-Visualize-the-World-s-Biggest-Oil-Producers-in-2023 ".NET MAUI Doughnut Chart to visualize the world's biggest oil producers in 2023 GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to use the Syncfusion [.NET MAUI Doughnut Chart](https://www.syncfusion.com/maui-controls/maui-circular-charts/chart-types/maui-doughnut-chart ".NET MAUI Doughnut Chart") to visualize the world’s biggest oil producers in 2023. We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below.

The existing customers can download the new version of Essential Studio on the [License and Downloads](https://www.syncfusion.com/account "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation for the Essential Studio products") to check out our incredible features. 

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Introducing the New .NET MAUI Digital Gauge Control](https://www.syncfusion.com/blogs/post/dotnetmaui-digital-gauge-control "Blog: Introducing the New .NET MAUI Digital Gauge Control")
- [Introducing the 12th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/syncfusion-dotnet-maui-2024-volume-2 "Blog: Introducing the 12th Set of New .NET MAUI Controls and Features")
- [Syncfusion Essential Studio 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2 "Blog: Syncfusion Essential Studio 2024 Volume 2 Is Here!")
- [What’s New in .NET MAUI Charts: 2024 Volume 2](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2024-volume-2 "Blog: What’s New in .NET MAUI Charts: 2024 Volume 2")