Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution
Tags: dotnetmaui, chart, mobile, desktop
Published: 2023-07-27 14:56:15

---
title: Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution
published: true
date: 2023-07-27 12:54:40 UTC
tags: dotnetmaui, chart, mobile, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-pyramid-chart-visualize-global-wealth-distribution.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr4oxdpi1z6zi2ihtdtn.png
---
Welcome to our **Chart of the Week** blog series!

Today, we’ll visualize the global wealth distribution in 2021 using the Syncfusion [.NET MAUI Pyramid Chart](https://www.syncfusion.com/maui-controls/maui-pyramid-charts ".NET MAUI Pyramid Charts"). This control is cross-platform compatible and adapts seamlessly to desktop (Windows and MacCatalyst) and mobile (Android and iOS) environments, providing consistent functionality.

In this example, we will compare the wealth distribution worldwide in 2021. This comparison will help us understand how wealth is distributed among the population and the existing inequalities, as illustrated in the following chart.

![.NET MAUI Pyramid Chart for Global Wealth Distribution](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/NET-MAUI-Pyramid-Chart-for-Global-Wealth-Distribution.png)Let’s see the steps to recreate this chart using the Syncfusion [.NET MAUI Pyramid Chart](https://help.syncfusion.com/maui/pyramid-charts/getting-started "Getting started with .NET MAUI Pyramid Chart") control.

## Step 1: Gathering the data

Before proceeding, we should gather the data for the chart. For this example, we used the [Credit Suisse Global Wealth Report](https://www.credit-suisse.com/media/assets/corporate/docs/about-us/research/publications/global-wealth-report-2022-en.pdf "Credit Suisse Global Wealth Report"), which provides comprehensive information on global wealth distribution, and extracted data from it. Specifically, we examined page number 21.

## Step 2: Populating data for the chart

To visualize the global wealth distribution, define the **GlobalWealthModel** class with the following properties:

- **WealthPercentage** : This property holds the percentage of global wealth for a specific population range.
- **AdultsCount** : This property holds the number of adults within the given population range.
- **PopulationRange** : This property represents the population range based on the given values.
- **Color** : This property represents the specific color for each segment.

Refer to the following code example.

```csharp
public class GlobalWealthModel
{
     public double WealthPercentage { get; set; }
     public double AdultsCount { get; set; }
     public string PopulationRange { get; set; }
     public Color Color { get; set; }
}
```

Now, generate the data collection containing global wealth using the **GlobalWealthPercentage** class.

```csharp
public class GlobalWealthPercentage
{
    public List<GlobalWealthModel> GlobalWealthData { get; set; }

    public GlobalWealthPercentage()
    {

        GlobalWealthData = new List<GlobalWealthModel>()
        {
            new GlobalWealthModel()
            {
                WealthPercentage = 1.2,
                AdultsCount = 62.5,
                PopulationRange = ">$1 million",
                Color = Color.FromHex("#95DB9C")
            },
            new GlobalWealthModel()
            {
                WealthPercentage = 11.8,
                AdultsCount = 627,
                PopulationRange = "$100,000 to $1 million",
                Color = Color.FromHex("#B95375")
            },
            new GlobalWealthModel()
            {
                WealthPercentage = 33.8,
                AdultsCount = 1791,
                PopulationRange = "$10,000 to $100,000",
                Color = Color.FromHex("#56BBAF")
            },
            new GlobalWealthModel()
            {
                WealthPercentage = 53.2,
                AdultsCount = 2818,
                PopulationRange = "<$10,000",
                Color = Color.FromHex("#606D7F")
            }
       };
    }
}
```

## Step 3: Configuring the Syncfusion .NET MAUI Pyramid Chart

Then, configure the Syncfusion .NET MAUI Pyramid Chart control using this [documentation](https://help.syncfusion.com/maui/pyramid-charts/getting-started "Getting started with .NET MAUI Pyramid Chart").

Refer to the following code example.

```xml
<chart: SfPyramidChart>
</chart: SfPyramidChart>
```

## Step 4: Binding data to the chart

Now, bind the global wealth data to the .NET MAUI Pyramid Chart.

Refer to the following code example.

```xml
<chart:SfPyramidChart ItemsSource="{Binding GlobalWealthData}" XBindingPath="AdultsCount" YBindingPath="WealthPercentage">
</chart:SfPyramidChart>
```

In this example, we’ve bound the **GlobalWealthData** with the **ItemSource** property. We’ve also specified the **XBindingPath** and **YBindingPath** with the **AdultsCount** and **WealthPercentage** properties, respectively.

## Step 5: Customizing the chart appearance

Let’s enhance the appearance of the .NET MAUI Pyramid Chart.

Refer to the following code example. In it, we’ve assigned the surface mode to the Pyramid Chart. With this, the surface area of the pyramid is accurately rendered, providing a proportional representation of the data values.

```xml
<chart: SfPyramidChart Mode="Surface">
</chart: SfPyramidChart>
```

We can more easily understand the plotted data by adding a title to the chart, as in the following code example.

```xml
<chart:SfPyramidChart.Title>
 <Grid>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="13"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <StackLayout Grid.RowSpan="2" Margin="0,8,0,6" Orientation="Vertical" BackgroundColor="#95DB9C"/>
   <StackLayout Grid.Column="1" Margin="5,0,0,0" HorizontalOptions="Start" Orientation="Vertical">
    <Label Text="The Global Wealth Pyramid" FontSize="Large" TextColor="Black" FontAttributes="Bold"/>
    <Label Text="An overview of global wealth distribution in 2021" TextColor="Gray" FontSize="18"/>
   </StackLayout>
 </Grid>
</chart:SfPyramidChart.Title>
```

Refer to the following code example to configure the pyramid colors.

**XML**

```xml
<chart: SfPyramidChart PaletteBrushes="{Binding PaletteBrushes}">
</chart: SfPyramidChart>
```

**C#**

```csharp
public class GlobalWealthPercentage
{
   public List<Brush> PaletteBrushes { get; set; }

   public GlobalWealthPercentage ()
   {
      PaletteBrushes = new List<Brush>
        {
          new SolidColorBrush(Color.FromArgb("#95DB9C")),
          new SolidColorBrush(Color.FromArgb("#B95375")),
          new SolidColorBrush(Color.FromArgb("#56BBAF")),
          new SolidColorBrush(Color.FromArgb("#606D7F")),
        };
   }
}
```

Refer to the following code to enable and customize the legend to indicate the meaning of the colors.

```xml
<chart:SfPyramidChart.Legend>
 <chart:ChartLegend Placement="Right" >
  <Chart:ChartLegend.ItemTemplate>
   <DataTemplate>
    <Grid ColumnDefinitions="Auto,Auto" Padding="5,0,5,0" Margin="{OnPlatform Android=3.5,iOS=3.5,Default=5}">
     <Path Grid.Column="0" Data="{StaticResource PathData}" Stroke="{Binding IconBrush,Converter={StaticResource brushToColor}}" VerticalOptions="Center" HorizontalOptions="Center"/>
     <Label Grid.Column="1" VerticalTextAlignment="Center" TextColor="Black" 
            Text="{Binding Item.PopulationRange}" HorizontalOptions="Start"
            FontSize="{OnPlatform Android=9,iOS=9,Default=14}" Padding="5" 
            HorizontalTextAlignment="Center" />
    </Grid>
   </DataTemplate>
  </Chart:ChartLegend.ItemTemplate>
 </Chart:ChartLegend>
</chart:SfPyramidChart.Legend>
```

Let’s customize the plot area of the chart, as shown in the following code example.

```xml
<chart:SfPyramidChart.PlotAreaBackgroundView>
  <AbsoluteLayout>
     <Label Text="% of world adults" 
            FontSize="{OnPlatform iOS=13,Android=13,Default=Subtitle}"
            FontAttributes="Bold" AbsoluteLayout.LayoutBounds="0.5,1,-1,-1"
            AbsoluteLayout.LayoutFlags="PositionProportional"/>			
  </AbsoluteLayout>
</chart:SfPyramidChart.PlotAreaBackgroundView>
```

## Step 6: Adding interactivity support

We can enhance the interactivity of our Pyramid Chart by adding tooltip support. The tooltips help us to display additional information or metadata when a segment is tapped or hovered over. We can also personalize the appearance of the tooltip using the **TooltipTemplate** property.

Refer to the following code example.

```xml
<chart: SfPyramidChart EnableTooltip="True">
 <chart:SfPyramidChart.TooltipTemplate>
  <DataTemplate>
   <Grid ColumnDefinitions="*" RowDefinitions="Auto,Auto,Auto">
    <Label Grid.Row="0" HorizontalTextAlignment="Center" FontSize="13"
           Text="{Binding Item.WealthPercentage, StringFormat='({0}%)'}" 
           TextColor="White" FontAttributes="Bold"/>                            
    <BoxView Grid.Row="1" HeightRequest="1" Color="Gray" Margin="1"/>
     <HorizontalStackLayout Spacing="5" Grid.Row="2" >
      <Rectangle HeightRequest="12" WidthRequest="12" 
                 Fill="{Binding Item.Color}"/>
      <Label Text="{Binding Item.AdultsCount,StringFormat='{0}M'}"  
              FontSize="Caption" TextColor="White" />
     </HorizontalStackLayout>
   </Grid>
  </DataTemplate>
 </chart:SfPyramidChart.TooltipTemplate>
</chart:SfPyramidChart>
```

After executing the previous code examples, we will get output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Visualizing-global-wealth-distribution-using-.NET-MAUI-Pyramid-Chart-1.gif" alt="Visualizing global wealth distribution using .NET MAUI Pyramid Chart" style="width:100%">

  <figcaption>Visualizing global wealth distribution using .NET MAUI Pyramid Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to the project on [GitHub](https://github.com/SyncfusionExamples/Creating-a-Pyramid-Chart-for-Global-Wealth-Distribution-in-2021 "Creating a .NET MAUI Pyramid Chart for Global Wealth Distribution in 2021 GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the global wealth distribution in 2021 using the Syncfusion [.NET MAUI Pyramid Chart](https://www.syncfusion.com/maui-controls/maui-pyramid-charts ".NET MAUI Pyramid Chart"). We encourage you to try the steps discussed and share your thoughts in the comments section below.

You can also contact 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"). Our team would be happy to assist you!

## Related blogs

- [Chart of the Week: Creating a Doughnut Chart for the World’s Top Coffee-Producing Countries](https://www.syncfusion.com/blogs/post/dotnet-maui-doughnut-chart-visualize-coffee-production.aspx "Blog: Chart of the Week: Creating a Doughnut Chart for the World’s Top Coffee-Producing Countries")
- [Introducing the New .NET MAUI Accordion Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-accordion-control.aspx "Blog: Introducing the New .NET MAUI Accordion Control")
- [Replicating a Hotel Booking UI in .NET MAUI](https://www.syncfusion.com/blogs/post/hotel-booking-ui-dotnet-maui.aspx "Blog: Replicating a Hotel Booking UI in .NET MAUI")
- [Seamlessly Integrate Numeric Up-Down UI in Your .NET MAUI App](https://www.syncfusion.com/blogs/post/seamlessly-integrate-numeric-up-down-ui-in-your-net-maui-app.aspx "Blog: Seamlessly Integrate Numeric Up-Down UI in Your .NET MAUI App")