Chart of the Week: Creating a .NET MAUI Pie Chart to Illustrate US Methane Emissions in 2021

Jollen Moyani - Jun 16 '23 - - Dev Community

Welcome to our Chart of the Week series.

This blog will use the Syncfusion .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

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 data as a reference. The data regarding methane gas emissions from various sources was obtained through a 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.

public class PieChartModel
{
    public string EmissionSource { get; set; }
    public double EmissionPercentage{ get; set; }
}
Enter fullscreen mode Exit fullscreen mode

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

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; }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Syncfusion .NET MAUI Circular Charts

Now, configure the Syncfusion .NET MAUI Circular Charts control referring to this documentation.

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

<Chart:SfCircularChart>
</Chart:SfCircularChart>
Enter fullscreen mode Exit fullscreen mode

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

To display the methane emissions rate in our chart, utilize the Syncfusion PieSeries instance. The chart series configuration involves specifying the XBindingPath to indicate the emissions source and the YBindingPath to represent the percentage of methane emissions.

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

<Chart:PieSeries XBindingPath="EmissionSource" YBindingPath="EmissionPercentage" ItemsSource="{Binding Data}">                
</Chart:PieSeries>
Enter fullscreen mode Exit fullscreen mode

In this example, we’ve bound the ItemSource 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.

<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>
Enter fullscreen mode Exit fullscreen mode

Next, customize the appearance of series elements by defining the series’s StartAngle and EndAngle and using custom PaletteBrushes properties. Also, draw attention by highlighting a specific chart segment using the ExplodeIndex property.

XAML

<Chart:PieSeries ExplodeIndex="2" Stroke="White" StrokeWidth="2" PaletteBrushes="{Binding CustomBrushes}" StartAngle="270" EndAngle="630">                     
</Chart:PieSeries>
Enter fullscreen mode Exit fullscreen mode

C#

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; }
}
Enter fullscreen mode Exit fullscreen mode

Then, show data labels in the chart using the ShowDataLabels property. Customize the data label placement, style, and connector line type using the DataLabelSettings property of the chart series.

<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>
Enter fullscreen mode Exit fullscreen mode

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 property.

Refer to the following code example.

<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>
Enter fullscreen mode Exit fullscreen mode

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

Visualizing US Methane Gas Emissions Data Using the Syncfusion .NET MAUI Pie Chart

Visualizing US Methane Gas Emissions Data Using the Syncfusion .NET MAUI Pie Chart

GitHub reference

For more details, refer to the project Pie chart illustrating U.S. methane emissions 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. 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, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
🛠️ How to Create an Awesome GitHub Profile Using Markdown
Image
Ensuring Efficacy: The Growing Importance of Cold Chain Logistics in the Pharmaceutical Industry
Image
How and When to Use saveQuietly() for Silent Updates in Laravel
Image
Regex timeout - C#
Image
Backtracking: Solving the N-Queens Problem and Python Implementation
Image
I got terminated i My Zoho Job and Reincarnated as a Full-Stack Next.js Developer!
Image
Implementing AI in a startup is transformative but requires the right strategy.

ai, startup, ethicalai
Image
Shifting Testing Left: The Request Isolation Solution

devex, microservices, testing, devops
Image
How to Integrate HashiCorp Vault with Node.js: Securely Manage Sensitive Data
Image
Bitcoin investment for beginners

webdev, beginners, programming, tutorial
Image
15 Interesting Facts About Lost Car Keys That You Never Knew
Image
10 Meetups On Accidents Lawyer You Should Attend
Image
An Guide To Lost Car Keys No Spare In 2023
Image
Ten Accident Lawyer Near Me-Related Stumbling Blocks You Should Never Share On Twitter
Image
What Are the Benefits of Using a Gree Air Conditioner?
Image
Revolutionizing Fashion: The Rise of the Global Emerging Alternative Leathers Market
Image
Stwórz swoje wymarzone mieszkanie: Przewodnik po aranżacji i dekoracji
Image
Nine Things That Your Parent Teach You About Gas Safe Engineer
Image
Applying an Image on a 3D Model with React Three Drei’s Decal

webdev, react, blender
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .