How to Visualize Hierarchical Data in .NET MAUI TreeMap (SfTreeMap)?

In the Syncfusion® .Net MAUI TreeMap control, you can visualize hierarchical data through the following steps.

Step1:

Initialize the SfTreeMap control and a create DataSource and set the PrimaryValuePath as shown in the following code.

XAML

<treemap:SfTreeMap x:Name="treeMap"
                  DataSource="{Binding PopulationDetails}"
                  RangeColorValuePath="Population">
</treemap:SfTreeMap>

Step2:

Add the RangeColorValuePath to the SfTreeMap as shown below.

XAML

<treemap:SfTreeMap x:Name="treeMap"
                  DataSource="{Binding PopulationDetails}"
                  RangeColorValuePath="Population"
                  PrimaryValuePath="Population" >
   
</treemap:SfTreeMap>

C#

public class PopulationDetails
{
   public string Country { get; set; }
   public string Continent { get; set; }
   public double Population { get; set; }
}

public class PopulationViewModel
{
   public PopulationViewModel()
   {
       this.PopulationDetails = new ObservableCollection<PopulationDetails>()
       {
           new PopulationDetails() { Continent ="North America", Country = "United States of America", Population = 339996564 },
           new PopulationDetails() { Continent ="South America", Country = "Brazil", Population = 216422446 },
           new PopulationDetails() { Continent ="North America", Country = "Mexico", Population = 128455567 },
           new PopulationDetails() { Continent ="South America", Country = "Colombia", Population = 52085168 },
           new PopulationDetails() { Continent ="South America", Country = "Argentina", Population = 45773884 },
           new PopulationDetails() { Continent ="North America", Country = "Canada", Population = 38781292 },
           new PopulationDetails() { Continent ="South America", Country = "Peru", Population = 34352719 },
           new PopulationDetails() { Continent ="South America", Country = "Venezuela", Population = 28838499 },
           new PopulationDetails() { Continent ="South America", Country = "Chile", Population = 19629590 },
           new PopulationDetails() { Continent ="South America", Country = "Ecuador", Population = 18190484 },
           new PopulationDetails() { Continent ="North America", Country = "Guatemala", Population = 18092026 },
           new PopulationDetails() { Continent ="South America", Country = "Bolivia", Population = 12388571 },
           new PopulationDetails() { Continent ="North America", Country = "Honduras", Population = 10593798 },
           new PopulationDetails() { Continent ="North America", Country = "Nicaragua", Population = 7046311 },
           new PopulationDetails() { Continent ="South America", Country = "Paraguay", Population = 6861524 },
           new PopulationDetails() { Continent ="North America", Country = "El Salvador", Population = 6364943 },
           new PopulationDetails() { Continent ="North America", Country = "Costa Rica", Population = 5212173 },
           new PopulationDetails() { Continent ="South America", Country = "Uruguay", Population = 3423109 },
       };
   }
   
   public ObservableCollection<PopulationDetails> PopulationDetails
   {
       get;
       set;
   }
}

Step3:

Create the TreeMapLevel to SfTreeMap with GroupPath for hierarchical data visualization. It supports n number of levels, and each level is separated using the GroupPath.

XAML:

<treemap:SfTreeMap.Levels>
   <treemap:TreeMapLevel GroupPath="Continent" />
</treemap:SfTreeMap.Levels>

Output:

Download the complete sample from GitHub.

Conclusion:
I hope you enjoyed learning how to visualize hierarchical data in .NET MAUI TreeMap (SfTreeMap).
You can refer to our .NET MAUI TreeMap feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI TreeMap documentation to understand how to present and manipulate data.
You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI TreeMap and other .NET MAUI components.
Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!