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
How to create a typography component with variants with Astro JSand Tailwind CSS

astro, tailwindcss, webcomponents, typography
Image
How a Spouse Visa Solicitor Can Assist You through the Application Procedure

spousevisa, applicationprocedure
Image
Reset password mailer implementation in rails 7 api, devise_token_auth, and sendgrid-ruby.

sendgrid, devise, rails, forgotpassword
Image
Transform Your Workouts: The Science Behind Pre-Workout Supplements
Image
BeKaBe Bekabeling: Wij doen het echte kabelwerk
Image
API Sprawl: Understanding the Problem & 5 Ways to Solve It

api, security, devops, performance
Image
10 Real Reasons People Hate Mesothelioma Asbestos Exposure
Image
Zonnekaart: is uw dak geschikt voor zonneboiler of zonnepanelen?
Image
Optimizing Jenkins Plugin Management with CLI – Setup, Benefits, and Best Practices

devops, cicd, programming, cli
Image
How to Enable .NET Extensibility 3.5 in Windows 11? Quick Guide!
Image
5 Best ETL Tools: A Comprehensive Comparison Guide

etl, datascience, dataengineering, learning
Image
What Is Asbestos Defense Litigation And How To Use What Is Asbestos Defense Litigation And How To Use
Image
10 Healthy Habits To Use Gas Fire Service Engineers Near Me
Image
15 Of The Best Twitter Accounts To Learn About Cheap Gas Engineer Near Me
Image
Inline Classes in Kotlin: Why, Where, and How to Use Them

kotlin, android, beginners, java
Image
A Guide to Root Access for AWS S3 Buckets

beginners, aws, security, iam
Image
10 Top Mobile Apps For Gas Boiler Engineer Near Me
Image
Unlocking Search Relevance: Large Language Models Power Pinterest Discovery

machinelearning, ai, beginners, datascience
Image
100x Faster Diffusion Planning with DiffuserLite's Refinement Approach

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