Getting Started with Blazor TreeMap Component in Blazor WASM App

10 Jul 202611 minutes to read

This section briefly explains how to include the Blazor TreeMap component in a Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI.

Create a new Blazor WebAssembly App

Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Blazor Extension. For detailed instructions, refer to the Blazor WebAssembly App Getting Started documentation.

Run the following command to create a new Blazor WebAssembly App.

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Alternatively, create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates, the Blazor Extension, or the C# Dev Kit extension.

Run the following command to create a new Blazor WebAssembly App.

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install the required Blazor package

Install Syncfusion.Blazor.TreeMap NuGet package. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.

  1. Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  2. Search the required NuGet package (Syncfusion.Blazor.TreeMap) and install it.

Alternatively, you can install the same package using the Package Manager Console with the following command.

Install-Package Syncfusion.Blazor.TreeMap -Version 34.1.29

Open the terminal and run the following command.

dotnet add package Syncfusion.Blazor.TreeMap -v 34.1.29

Open the command prompt and run the following command.

dotnet add package Syncfusion.Blazor.TreeMap -v 34.1.29

Add import namespaces

After the package is installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.TreeMap namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.TreeMap

Register the Blazor service

Open the Program.cs file in Blazor WebAssembly App and register the Blazor service.

....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....

Add script resources

The script can be accessed from NuGet through Static Web Assets. Include the script references in the ~wwwroot/index.html file.

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Add Blazor TreeMap component

Open a Razor file located in the ~/Pages/*.razor (for example, Home.razor) and add the Blazor TreeMap component inside the razor file.

  • You can use the DataSource property to load the car sales details in the TreeMap component. Specify a field name from the data source in the WeightValuePath property to calculate the TreeMap item size.
@using Syncfusion.Blazor.TreeMap

<SfTreeMap DataSource="GrowthReport"
            WeightValuePath="GDP"
            TValue="Country">
</SfTreeMap>

@code {
    public class Country
    {
        public string Name { get; set; }
        public double GDP { get; set; }
    }
    public List<Country> GrowthReport = new List<Country> {
        new Country  {Name="United States", GDP=17946 },
        new Country  {Name="China", GDP=10866 },
        new Country  {Name="Japan", GDP=4123 },
        new Country  {Name="Germany", GDP=3355 },
        new Country  {Name="United Kingdom", GDP=2848 },
        new Country  {Name="France", GDP=2421 },
        new Country  {Name="India", GDP=2073 },
        new Country  {Name="Italy", GDP=1814 },
        new Country  {Name="Brazil", GDP=1774 },
        new Country  {Name="Canada", GDP=1550 }
    };
}

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor TreeMap component will render in your default web browser.

Open the terminal and run the following command.

dotnet run

Open the command prompt and run the following command.

dotnet run
Blazor TreeMap Component

Adding labels in Blazor TreeMap items

Add label text to the leaf items in the TreeMap component by setting the field name from data source in the LabelPath property in the TreeMapLeafItemSettings, and it provides information to the user about the leaf items.

@using Syncfusion.Blazor.TreeMap

<SfTreeMap DataSource="GrowthReport"
            WeightValuePath="GDP"
            TValue="Country">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray"></TreeMapLeafItemSettings>
</SfTreeMap>

NOTE

Refer to the code block to know about the property value of the GrowthReport.

Blazor TreeMap with Label

Adding title to Blazor TreeMap

Add a title using the Text property in the TreeMapTitleSettings to provide quick information to the user about the items rendered in the TreeMap.

@using Syncfusion.Blazor.TreeMap

<SfTreeMap DataSource="GrowthReport"
            WeightValuePath="GDP"
            TValue="Country">
    <TreeMapTitleSettings Text="Top 10 countries by GDP Nominal - 2015"></TreeMapTitleSettings>
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray"></TreeMapLeafItemSettings>
</SfTreeMap>

NOTE

Refer to the code block to know the property value of the GrowthReport.

Blazor TreeMap with Title

NOTE

View Sample in GitHub.

Apply color mapping

The color mapping supports customization of item colors based on the underlying value received from the bound data source. Specify the field name from which the values have to be compared for the items in the RangeColorValuePath property in SfTreeMap. Also, specify range value and color in the TreeMapLeafColorMapping. Here, in this example, “Orange” is specified for the range “0 - 3000” and “Green” is specified for the range “3000 - 20000”.

@using Syncfusion.Blazor.TreeMap

<SfTreeMap DataSource="GrowthReport"
            WeightValuePath="GDP"
            TValue="Country"
            RangeColorValuePath="GDP">
    <TreeMapTitleSettings Text="Top 10 countries by GDP Nominal - 2015"></TreeMapTitleSettings>
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray">
        <TreeMapLeafColorMappings>
            <TreeMapLeafColorMapping StartRange="0" EndRange="3000" Color="@(new string[] { "Orange" })"></TreeMapLeafColorMapping>
            <TreeMapLeafColorMapping StartRange="3000" EndRange="20000" Color="@(new string[] { "Green" })"></TreeMapLeafColorMapping>
        </TreeMapLeafColorMappings>
    </TreeMapLeafItemSettings>
</SfTreeMap>

NOTE

Refer to the code block to know about the property value of the GrowthReport.

Blazor TreeMap with Color Mapping

Enable legend

Legend items are used to denote the color mapping categories and show the legend for the TreeMap by setting the Visible property to true in the TreeMapLegendSettings.

@using Syncfusion.Blazor.TreeMap

<SfTreeMap DataSource="GrowthReport"
            WeightValuePath="GDP"
            TValue="Country"
            RangeColorValuePath="GDP">
    <TreeMapTitleSettings Text="Top 10 countries by GDP Nominal - 2015"></TreeMapTitleSettings>
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray">
        <TreeMapLeafColorMappings>
            <TreeMapLeafColorMapping StartRange="0" EndRange="3000" Color="@(new string[] { "Orange" })"></TreeMapLeafColorMapping>
            <TreeMapLeafColorMapping StartRange="3000" EndRange="20000" Color="@(new string[] { "Green" })"></TreeMapLeafColorMapping>
        </TreeMapLeafColorMappings>
    </TreeMapLeafItemSettings>
    <TreeMapLegendSettings Visible="true"></TreeMapLegendSettings>
</SfTreeMap>

NOTE

Refer to the code block to know about the property value of the GrowthReport.

Blazor TreeMap with Legend

Enable tooltip

When space constraints prevent displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the Visible property to true in the TreeMapTooltipSettings.

@using Syncfusion.Blazor.TreeMap

<SfTreeMap DataSource="GrowthReport"
            WeightValuePath="GDP"
            TValue="Country"
            RangeColorValuePath="GDP">
    <TreeMapTitleSettings Text="Top 10 countries by GDP Nominal - 2015"></TreeMapTitleSettings>
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray">
        <TreeMapLeafColorMappings>
            <TreeMapLeafColorMapping StartRange="0" EndRange="3000" Color="@(new string[] { "Orange" })"></TreeMapLeafColorMapping>
            <TreeMapLeafColorMapping StartRange="3000" EndRange="20000" Color="@(new string[] { "Green" })"></TreeMapLeafColorMapping>
        </TreeMapLeafColorMappings>
    </TreeMapLeafItemSettings>
    <TreeMapLegendSettings Visible="true"></TreeMapLegendSettings>
    <TreeMapTooltipSettings Visible="true"></TreeMapTooltipSettings>
</SfTreeMap>

NOTE

Refer to the code block to know about the property value of the GrowthReport.

Blazor TreeMap with Tooltip

NOTE

You can also explore our Blazor TreeMap example that shows you how to render and configure the treemap.

See also

  1. Getting Started with Blazor for Blazor Server App
  2. Getting Started with Blazor Web App