Chart of the Week: Creating a .NET MAUI Pie Chart to Illustrate US Methane Emissions in 2021
Tags: dotnetmaui, charts, mobile, desktop
Published: 2023-06-16 04:20:48

---
title: Chart of the Week: Creating a .NET MAUI Pie Chart to Illustrate US Methane Emissions in 2021
published: true
date: 2023-06-15 11:06:23 UTC
tags: dotnetmaui, charts, mobile, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-pie-chart-visualize-us-methane-emissions.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp0ojpieaaucbmxh1cek.png
---
Welcome to our **Chart of the Week** series.

This blog will use the [Syncfusion .NET MAUI pie chart](https://help.syncfusion.com/maui/circular-charts/piechart "Getting Started with .NET MAUI Pie Chart") to visualize U.S. methane gas emission data for the year 2021.

A pie chart is an effective way to represent data as a percentage of a whole. It can be utilized in various scenarios, such as analyzing sales distribution among different product categories, managing personal finances or business budgets, and performing market share analysis.

The following pie chart demonstrates the United States’ methane gas emissions from various sources in 2021. ![Creating a Pie Chart to visualize US Methane Emissions for 2021](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/PieChartExample-e1686121219445.png)

Let’s see the steps to recreate this pie chart.

## Step 1: Gather the data

First, we need to gather the data. We are using the [US Landfill Methane Outreach Program](https://www.epa.gov/lmop/basic-information-about-landfill-gas "US Landfill Methane Outreach Program") data as a reference. The data regarding methane gas emissions from various sources was obtained through a [survey](https://www.epa.gov/system/files/documents/2023-04/US-GHG-Inventory-2023-Chapter-2-Trends.pdf "Methane Gas Emissions Survey") conducted as part of the reference study.

## Step 2: Prepare the data for the pie chart

Define the **PieChartModel** class. This class will serve as a container to store the details of the emissions source and its corresponding percentage. The **EmissionSource** property will hold the name of the emissions source, while the **EmissionPercentage** property will store the corresponding percentage value.

Refer to the following code example.

```csharp
public class PieChartModel
{
    public string EmissionSource { get; set; }
    public double EmissionPercentage{ get; set; }
}
```

Then, generate the data collection to demonstrate the methane emissions with respect to the source using the **PieChartViewModel** class.

```csharp
public class PieChartViewModel
{
    public PieChartViewModel()
    {
        Data = new List<PieChartModel>()
        {
            new PieChartModel() { EmissionSource = "Natural Gas and Petroleum Systems", EmissionPercentage = 32},
            new PieChartModel() { EmissionSource = "Enteric Fermentation", EmissionPercentage = 27},
            new PieChartModel() { EmissionSource = "MSW Landfills", EmissionPercentage = 14 },
            new PieChartModel() { EmissionSource = "Other Landfills", EmissionPercentage = 3 },
            new PieChartModel() { EmissionSource = "Manure Management", EmissionPercentage = 9 },
            new PieChartModel() { EmissionSource = "Coal Mining", EmissionPercentage = 6 },
            new PieChartModel() { EmissionSource = "Other", EmissionPercentage = 9 }
         };
    }

   public List<PieChartModel> Data { get; set; }
}
```

## Step 3: Configure Syncfusion .NET MAUI Circular Charts

Now, configure the Syncfusion .NET MAUI Circular Charts control referring to this [documentation](https://help.syncfusion.com/maui/circular-charts/getting-started "Getting Started with .NET MAUI Chart").

The code to include Circular Charts in the XAML page will look like the following.

```xml
<Chart:SfCircularChart>
</Chart:SfCircularChart>
```

## Step 4: Bind methane gas emissions data to the pie chart

To display the methane emissions rate in our chart, utilize the Syncfusion [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html "PieSeries Class of .NET MAUI Chart") instance. The chart series configuration involves specifying the [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath "XBindingPath property of .NET MAUI Pie Chart") to indicate the emissions source and the [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_YBindingPath "YBindingPath property of .NET MAUI Pie Chart") to represent the percentage of methane emissions.

Here’s an example showcasing how to add the pie series to our chart.

```xml
<Chart:PieSeries XBindingPath="EmissionSource" YBindingPath="EmissionPercentage" ItemsSource="{Binding Data}">                
</Chart:PieSeries>
```

In this example, we’ve bound the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource "ItemSource property of .NET MAUI Pie Chart") property of the chart series to a collection that contains the methane emissions data for the year 2021. This data is sourced from the **PieChartViewModel** class.

## Step 5: Customize the chart appearance

Let’s enhance the appearance of our pie chart by customizing the series appearance, setting the chart title, highlighting specific segments, and more.

Refer to the following code example to add a title to the chart. This will provide quick context to the plotted data.

```xml
<Chart:SfCircularChart.Title>
 <Border StrokeShape="{OnPlatform WinUI='RoundRectangle 8', Android='RoundRectangle 5', MacCatalyst='RoundRectangle 15', iOS='RoundRectangle 8'}" Stroke="#199CB3" BackgroundColor="#199CB3" StrokeThickness="3">
  <Label Text="2021 U.S. Methane Emissions, By Source" HorizontalTextAlignment="Center" TextColor="White" FontSize="{OnPlatform WinUI='Medium', MacCatalyst='35', iOS='Medium', Android='Medium'}" FontAttributes="Bold" BackgroundColor="#199CB3"/>
 </Border>
</Chart:SfCircularChart.Title>
```

Next, customize the appearance of series elements by defining the series’s [StartAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_StartAngle "StartAngle property of .NET MAUI Pie Chart") and [EndAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_EndAngle "EndAngle property of .NET MAUI Pie Chart") and using custom [PaletteBrushes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes "PaletteBrushes property of .NET MAUI Pie Chart") properties. Also, draw attention by highlighting a specific chart segment using the [ExplodeIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html#Syncfusion_Maui_Charts_PieSeries_ExplodeIndex "ExplodeIndex property of .NET MAUI Pie Chart") property.

**XAML**

```xml
<Chart:PieSeries ExplodeIndex="2" Stroke="White" StrokeWidth="2" PaletteBrushes="{Binding CustomBrushes}" StartAngle="270" EndAngle="630">                     
</Chart:PieSeries>
```

**C#**

```csharp
public class PieChartViewModel
{
   public PieChartViewModel()
   {
       CustomBrushes = new List<Brush>();
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#0E778A")));
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#3499AB")));
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#199CB3")));
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#42B6CB")));
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#6BCBDC")));
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#84D7E6")));
       CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#89DCEb")));
   }

   public List<Brush> CustomBrushes { get; set; }
}
```

Then, show data labels in the chart using the [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels "ShowDataLabels property of .NET MAUI Pie Chart") property. Customize the data label placement, style, and connector line type using the [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularDataLabelSettings.html "DataLabelSettings class of .NET MAUI Pie Chart") property of the chart series.

```xml
<Chart:PieSeries ShowDataLabels="True">
 <Chart:PieSeries.DataLabelSettings>
  <Chart:CircularDataLabelSettings UseSeriesPalette="True" LabelPlacement="Outer">
   <Chart:CircularDataLabelSettings.LabelStyle>
    <Chart:ChartDataLabelStyle LabelFormat="0.##'%"/>
   </Chart:CircularDataLabelSettings.LabelStyle>
  </Chart:CircularDataLabelSettings>
 </Chart:PieSeries.DataLabelSettings>
</Chart:PieSeries>
```

## Step 6: Add tooltip interaction

Finally, add the tooltip feature to display additional information or metadata when a chart segment is tapped or hovered over. We can also customize the appearance of the tooltip using the [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate "TooltipTemplate property of .NET MAUI Pie Chart") property.

Refer to the following code example.

```xml
<Chart:PieSeries EnableTooltip="True">
 
 <Chart:PieSeries.TooltipTemplate>
  <DataTemplate>
   <Grid ColumnDefinitions="{OnPlatform iOS='160', MacCatalyst='200'}" RowDefinitions="Auto"> 
    <Label Grid.Row="0" Grid.Column="0" Text="{Binding Item.EmissionSource}" FontAttributes="Bold" FontSize="{OnPlatform MacCatalyst='Large'}" TextColor="White" MaximumWidthRequest="{OnPlatform WinUI='140', Android='130'}" LineBreakMode="WordWrap" HorizontalOptions="Fill" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Center"/>
   </Grid>
  </DataTemplate>
 </Chart:PieSeries.TooltipTemplate>

</Chart:PieSeries>
```

After executing these code examples, we’ll get an output chart like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/PieChartExample-e1686121219445.png" alt="Visualizing US Methane Gas Emissions Data Using the Syncfusion .NET MAUI Pie Chart" style="width:100%">

  <figcaption>Visualizing US Methane Gas Emissions Data Using the Syncfusion .NET MAUI Pie Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to the project [Pie chart illustrating U.S. methane emissions](https://github.com/SyncfusionExamples/Creating-a-Pie-Chart-to-illustrate-US-Methane-Emissions-in-2021 "Pie Chart illustrating U.S. methane emissions GitHub demo") on GitHub.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the U.S. methane gas emissions data for the year 2021 using the [Syncfusion .NET MAUI pie chart](https://help.syncfusion.com/maui/circular-charts/piechart ".NET MAUI Pie Chart"). We encourage you to try these steps to visualize your desired data and share your feedback in the comments section below.

You can also reach us through our [support forum](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

- [Create a Place Explorer App Using .NET MAUI and ChatGPT](https://www.syncfusion.com/blogs/post/place-explorer-app-using-dotnet-maui-chatgpt.aspx "Blog: Create a Place Explorer App Using .NET MAUI and ChatGPT")
- [A Smoother User Experience with Image Caching in .NET MAUI](https://www.syncfusion.com/blogs/post/image-caching-in-dotnet-maui.aspx "Blog: A Smoother User Experience with Image Caching in .NET MAUI")
- [Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data](https://www.syncfusion.com/blogs/post/dotnet-maui-column-chart-visualize-yearly-box-office-data.aspx "Blog: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data")
- [Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss](https://www.syncfusion.com/blogs/post/dotnet-maui-inversed-column-chart-visualize-yearly-operating-loss-data.aspx "Blog: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss")