Chart of the Week: Creating a WPF Pie Chart to Visualize the Percentage of Global Forest Area for Each Country
Tags: wpf, chart, development, desktop
Published: 2024-06-19 10:35:55

---
title: Chart of the Week: Creating a WPF Pie Chart to Visualize the Percentage of Global Forest Area for Each Country
published: true
date: 2024-06-12 13:18:59 UTC
tags: wpf, chart, development, desktop
canonical_url: https://www.syncfusion.com/blogs/post/wpf-pie-chart-global-forest-area
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx1eu4l8j0qjymigxxej.png
---

**TL;DR:** Learn to visualize each country’s global forest area percentage using the Syncfusion WPF Pie Chart. We’ll cover data preparation, chart configuration, and customization for a clear view of forest distribution!

Welcome to our Chart of the Week blog series!

Today, we’ll use the Syncfusion [WPF Pie Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-pie-chart "WPF Pie Chart") to visualize each country’s percentage of global forest area in 2021.

The WPF Pie Chart is a circular graph that divides data into slices to show the proportion of each category. It’s perfect for illustrating percentages or parts of a whole, with each slice’s size corresponding to its value within the total dataset. You can customize the chart with different colors, labels, and interactions to enhance data visualization and user experience.

The following image shows the Pie Chart we’re going to create.[![Visualizing the global forest area data using the Syncfusion WPF Pie Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Visualizing-the-global-forest-area-data-using-the-Syncfusion-WPF-Pie-Chart.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Visualizing-the-global-forest-area-data-using-the-Syncfusion-WPF-Pie-Chart.png)

Let’s get started!

## Step 1: Gathering the data

First, gather the data regarding the [global forest area](https://data.worldbank.org/indicator/AG.LND.FRST.K2?most_recent_value_desc=true "Global forest area data"). You can also download this data in CSV format.

## Step 2: Preparing the data for the chart

Next, the data will be organized by creating a **ForestDataModel** class to define the structure of the forest area data and a **ForestDataViewModel** class to handle data manipulation and communication between the model and the Pie Chart.

The model represents the data you want to visualize, including properties such as country name, corresponding forest area, and percentage of the global forest area.

Refer to the following code example.

```csharp
public class ForestDataModel
{
     public string? Country { get; set; }

     public double Value { get; set; }

     public double Percentage { get; set; }
}
```

Then, create the **ForestDataViewModel** class. It mediates between data models and user interface elements (e.g., Pie Charts), preparing and formatting data for display and interaction.

Refer to the following code example.

```csharp
public class ForestDataViewModel
{
    public List<ForestDataModel> ForestDatas { get; set; }

    public ForestDataViewModel()
    {
        ForestDatas = new List<ForestDataModel>();

        ReadCSV();

    }
}
```

Next, convert the CSV data into a dataset using the **ReadCSV** method. Refer to the following code example.

```csharp
public void ReadCSV()
{
    Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
    Stream inputStream = executingAssembly.GetManifestResourceStream("ForestSampleWPF.ForestData.csv");
    List<string> lines = new List<string>();
    if (inputStream != null)
    {
        string line;
        StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }
        lines.RemoveAt(0);

        double otherValues = 0;
        double totalValue = 0;

        foreach (var dataPoint in lines)
        {
            string[] data = dataPoint.Split(',');

            var value = double.Parse(data[3]);
            if (value >= 915000)
            {
                ForestDatas.Add(new ForestDataModel() { Country = data[1], Value = value });
                totalValue = totalValue + value;
            }
            else
            {
                otherValues = otherValues + value;
            }
        }

        totalValue = totalValue + otherValues;
        ForestDatas = ForestDatas.OrderByDescending(data => data.Value).ToList();

        ForestDatas.Add(new ForestDataModel() { Country = "Others", Value = otherValues });

        AddPercentage(totalValue);
    }
}

private void AddPercentage(double totalValue)
{
    foreach (var dataPoint in ForestDatas)
    {
        var percentage = (dataPoint.Value / totalValue * 100);
        dataPoint.Percentage = percentage;
    }
}
```

## Step 3: Adding a border

 Before we create the Pie Chart, let’s enhance it with a border. This addition will elevate its visual appeal and clarity.

Refer to the following code example.

```xml
<Window x:Class="ForestSampleWPF.MainWindow"
        xmlns:local="clr-namespace:ForestSampleWPF"
        Title="MainWindow" Height="650" Width="860" >

 <!--Set border for the Pie Chart -->

  <Border Background="#40008B8B" 
          Width="800" 
          Margin="20" 
          BorderBrush="Black" 
          BorderThickness="2">

   <!--Create the Pie Chart inside the border-->

  </Border>
</Window>
```

## Step 4: Configure the Syncfusion WPF Pie Chart control

Now, configure the Syncfusion WPF Pie Chart control using this [documentation](https://help.syncfusion.com/wpf/charts/seriestypes/pieanddoughnut "Getting started with WPF Pie Chart").

Refer to the following code example.

```xml
<Window x:Class="ForestSampleWPF.MainWindow" xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">

 <syncfusion:SfChart x:Name="Chart">

  <syncfusion:PieSeries>
    . . .
  </syncfusion:PieSeries>

 </syncfusion:SfChart>

    . . .
</Window>
```

## Step 5: Bind the data to the WPF Pie Chart

Let’s bind the **ForestDatas** collection to the Syncfusion WPF **PieSeries**. Each country’s pie slice will represent its corresponding forest area (in sq km). Refer to the following code example.

```xml
. . .   
<syncfusion:SfChart x:Name="Chart">

 <syncfusion:PieSeries ItemsSource="{Binding ForestDatas}"  
                       XBindingPath="Country" 
                       YBindingPath="Value">
 </syncfusion:PieSeries>

</syncfusion:SfChart>
```

## Step 6: Customize the WPF Pie Chart appearance

Now, let’s improve the readability of the Syncfusion WPF Pie Chart by customizing its [appearance](https://help.syncfusion.com/wpf/charts/appearance "Appearance customization in WPF Charts").

### Customize the header

First, add a header to the chart using the following code example, ensuring clarity and context. Enhance the [header](https://help.syncfusion.com/wpf/charts/header "Header in WPF Charts") with a border, grid layout, image, and label. Adjust image source, label content, font size, and padding as needed.

```xml
. . . . 

<syncfusion:SfChart.Header >

 <Border Margin="0,30,00,0">
  <Grid x:Name="header" >
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

   <Image Source="tree.png" Height="40" Width="40" HorizontalAlignment="Left"/>
   <Label Content="Percentage of Global Forest Area by Countries in 2021"
          FontSize="20"
          FontWeight="SemiBold"
          Padding="10"
          FontFamily="Arial"
          Foreground="Black"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Grid.Column="1"/>    
  </Grid>
 </Border>

</syncfusion:SfChart.Header>
```

### Customize the chart series

Refer to the following code example to customize the Pie Chart series using the [Palette](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Palette "Palette property of the WPF Charts"), [Stroke](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Stroke "Stroke property of the WPF Charts"), [StrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_StrokeThickness "StrokeThickness property of the WPF Charts"), and other properties.

```xml
<syncfusion:PieSeries ExplodeOnMouseClick="True" 
                      ExplodeIndex="7"
                      StartAngle="-120" 
                      EndAngle="240" " 
                      Palette="GreenChrome" 
                      StrokeThickness="0.5" 
                      Stroke="White">

</syncfusion:PieSeries>
```

### Customize the data labels

Let’s customize the data labels with the [LabelTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelTemplate "LabelTemplate property of the WPF Charts") property.

Refer to the following code example.

```xml
. . . . .
        
<syncfusion:SfChart x:Name="Chart">

 <syncfusion:PieSeries LabelPosition="Outside" >

  <syncfusion:PieSeries.AdornmentsInfo>
   <syncfusion:ChartAdornmentInfo LabelPosition="Inner" 
                                   ShowConnectorLine="True" 
                                   HighlightOnSelection="True"  
                                   SegmentLabelContent="LabelContentPath"  
                                   LabelTemplate="{StaticResource adornmentTemplate}"
                                   ShowLabel="True">    
   </syncfusion:ChartAdornmentInfo>
  </syncfusion:PieSeries.AdornmentsInfo>
 </syncfusion:PieSeries>
</syncfusion:SfChart>

. . . . . 
```

### Customize the chart legend

Now, customize the chart legend with the [ItemTemplate](https://help.syncfusion.com/wpf/charts/legend#customization "ItemTemplate property of WPF Charts") and [DockPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_DockPosition "DockPosition property of the WPF Charts") properties.

Refer to the following code example.

```xml
. . . . .
<syncfusion:SfChart.Legend>
 <syncfusion:ChartLegend DockPosition="Right"     
                         ItemTemplate="{StaticResource legendTemplate}" 
                         LegendPosition="Inside" 
                         FontFamily="Arial" 
                         FontWeight="Normal" Width="100" />
</syncfusion:SfChart.Legend>
. . . . .
```

After executing these 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-global-forest-area-data-using-the-Syncfusion-WPF-Pie-Chart.png" alt="Visualizing the global forest area data using the Syncfusion WPF Pie Chart" style="width:100%">

  <figcaption>Visualizing the global forest area data using the Syncfusion WPF Pie Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to visualizing the [percentage of global forest area using the WPF Pie Chart GitHub demo](https://github.com/SyncfusionExamples/Creating-the-WPF-Pie-Chart-to-visualize-Global-Forest-Area-Percentage-by-Countries-in-2021 "Creating the WPF Pie Chart to visualize global forest area percentage by countries in 2021 GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to use the Syncfusion [WPF Pie Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-pie-chart "WPF Pie Chart") to visualize each country’s global forest area percentage in 2021. Please follow the steps outlined in this blog and share your thoughts in the comments below.

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 of 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

- [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!")
- [Chart of the Week: Creating a WPF Sunburst Chart to Visualize the Syncfusion Chart of the Week Blog Series](https://www.syncfusion.com/blogs/post/wpf-sunburst-chart-syncfusion-blogs "Blog: Chart of the Week: Creating a WPF Sunburst Chart to Visualize the Syncfusion Chart of the Week Blog Series")
- [Reached 50! A Milestone for the Chart of the Week Blog Series](https://www.syncfusion.com/blogs/post/50th-milestone-chart-of-the-week-blog "Blog: Reached 50! A Milestone for the Chart of the Week Blog Series")
- [Navigate PDF Annotations in a TreeView Using WPF PDF Viewer](https://www.syncfusion.com/blogs/post/navigate-pdf-annotations-treeview-wpf-pdf-viewer "Blog: Navigate PDF Annotations in a TreeView Using WPF PDF Viewer")