Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (226)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (942)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (658)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (614)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution

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

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; }
}

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")
            }
       };
    }
}

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>

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>

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>

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>

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

XML

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

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")),
        };
   }
}

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>

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

<chart:SfPyramidChart.PlotAreaBackgroundView>
  <AbsoluteLayout>
     <Label Text="% of world's 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.

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

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!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed