Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution

Jollen Moyani - Jul 27 '23 - - Dev Community

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. 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 DistributionLet’s see the steps to recreate this chart using the Syncfusion .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, 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.

public class GlobalWealthModel
{
     public double WealthPercentage { get; set; }
     public double AdultsCount { get; set; }
     public string PopulationRange { get; set; }
     public Color Color { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

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

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

Step 3: Configuring the Syncfusion .NET MAUI Pyramid Chart

Then, configure the Syncfusion .NET MAUI Pyramid Chart control using this documentation.

Refer to the following code example.

<chart: SfPyramidChart>
</chart: SfPyramidChart>
Enter fullscreen mode Exit fullscreen mode

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.

<chart:SfPyramidChart ItemsSource="{Binding GlobalWealthData}" XBindingPath="AdultsCount" YBindingPath="WealthPercentage">
</chart:SfPyramidChart>
Enter fullscreen mode Exit fullscreen mode

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.

<chart: SfPyramidChart Mode="Surface">
</chart: SfPyramidChart>
Enter fullscreen mode Exit fullscreen mode

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

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

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

XML

<chart: SfPyramidChart PaletteBrushes="{Binding PaletteBrushes}">
</chart: SfPyramidChart>
Enter fullscreen mode Exit fullscreen mode

C#

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

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

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

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

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

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.

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

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

Visualizing global wealth distribution using .NET MAUI Pyramid Chart

Visualizing global wealth distribution using .NET MAUI Pyramid Chart

GitHub reference

For more details, refer to the project on GitHub.

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. 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, support portal, or feedback portal. Our team would be happy to assist you!

Related blogs

Image
Question Base

productivity
Image
Dune Buggy Rental in Dubai, The Ultimate Desert Adventure
Image
Variasi Keuntungan Judi Online24jam Deposit Pulsa
Image
Why Pascal Deserves a Second Look
Image
How to Use On-Page SEO to Improve Your Google Rank and Gain Organic Traffic

website, seo, google, learning
Image
Agnilonda's Hacktoberfest 2024 Journey as Maintainer with helloWorld 🚀

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
c# clean code: Writing Efficient LINQ Queries

cleancode, cleancoding, csharp, programming
Image
realitas menarik terkait slots online
Image
Global Green Hydrogen for Grid Balancing Market: Powering the Future of Energy Stability
Image
Next.JS CMS — Top choices in 2024

headlesscms, nextjs, jamstack
Image
langkah membuka situs slots online yang mengenai internet positif
Image
10 PHP Code Snippets Every Developer Should Keep Handy

php, programming, development, laravel
Image
Understanding Object-Relational Impedance Mismatch
Image
Nên mua máy chà sàn CŨ hay thuê để tiết kiệm chi phí?

news
Image
AWS Cloud Essential Series

aws, cloud, techlead, webdev
Image
Linux File System & Permissions and SSH Key Management

linux, ssh, permissions, linuxfilesystem
Image
How AI and Automation Are Changing Sales Forecasting

automatio, nocode, webscraping
Image
Teknik Urus Modal Kecil Buat Taruhan Judi Online
Image
Unifying Generative AI: Generator Matching Leverages Markov Processes

machinelearning, ai, datascience
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .