Blazor

Search results

Getting started with Blazor TreeMap component

14 Apr 2021 / 5 minutes to read

Blazor TreeMap is a feature-rich component used to visualize both hierarchical and flat data.

This section briefly explains how to include a TreeMap in your Blazor server-side application. Refer to Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 documentation for the introduction and configuring the common specifications.

Importing Syncfusion Blazor TreeMap component in the application

Install Syncfusion.Blazor.TreeMap NuGet package in the application using the NuGet Package Manager.
You can add the client-side resources through CDN or local npm package in the <head> element of the ~/Pages/_Host.cshtml page.

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
    <!---CDN--->
    @*<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />*@
</head>

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

<head>
   <link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />
   <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Adding component package to the application

Open the ~/_Imports.razor file and include the Syncfusion.Blazor.TreeMap namespace.

@using Syncfusion.Blazor.TreeMap

Adding SyncfusionBlazor Service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

using Syncfusion.Blazor;

namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceColloection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

To enable custom client-side source loading from CRG or CDN, please refer to the section about custom resources in Blazor application.

Adding TreeMap component to an application

The Syncfusion TreeMap component can be initialized in any razor page inside the ~/Pages folder. For example, the TreeMap component can be added to the ~/Pages/Index.razor page. In a new application, if Index.razor page has any default content template, then those content can be completely removed and following code can be added.

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

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

@code {
class Country
{
    public string Name { get; set; }
    public double GDP { get; set; }
}
private 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 }
};
}

After the successful compilation of your application, press F5 to run the application. The Blazor TreeMap component will render in the web browser as illustrated in the following screenshot.

TreeMap basic sample

Add labels in TreeMap items

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

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

Refer code block to know the property value of GrowthReport.

TreeMap with label

Add title to TreeMap

You can add a title using Text property in TreeMapTitleSettings to provide quick information to the user about the items rendered in the 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>

Refer code block to know the property value of GrowthReport.

TreeMap with title

Apply color mapping

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

<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 From="0" To="3000" Color="@(new string[] { "Orange" })"></TreeMapLeafColorMapping>
        <TreeMapLeafColorMapping From="3000" To="20000" Color="@(new string[] { "Green" })"></TreeMapLeafColorMapping>
    </TreeMapLeafColorMappings>
</TreeMapLeafItemSettings>
</SfTreeMap>

Refer code block to know the property value of GrowthReport.

TreeMap with color mapping

Enable legend

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

<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 From="0" To="3000" Color="@(new string[] { "Orange" })"></TreeMapLeafColorMapping>
        <TreeMapLeafColorMapping From="3000" To="20000" Color="@(new string[] { "Green" })"></TreeMapLeafColorMapping>
    </TreeMapLeafColorMappings>
</TreeMapLeafItemSettings>
<TreeMapLegendSettings Visible="true"></TreeMapLegendSettings>
</SfTreeMap>

Refer code block to know the property value of GrowthReport.

TreeMap with legend

The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the Visible property as true in TreeMapTooltipSettings.

<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 From="0" To="3000" Color="@(new string[] { "Orange" })"></TreeMapLeafColorMapping>
        <TreeMapLeafColorMapping From="3000" To="20000" Color="@(new string[] { "Green" })"></TreeMapLeafColorMapping>
    </TreeMapLeafColorMappings>
</TreeMapLeafItemSettings>
<TreeMapLegendSettings Visible="true"></TreeMapLegendSettings>
<TreeMapTooltipSettings Visible="true"></TreeMapTooltipSettings>
</SfTreeMap>

Refer code block to know the property value of GrowthReport.

TreeMap with legend

Getting started with Blazor TreeMap component

Importing Syncfusion Blazor TreeMap component in the application

Adding component package to the application

Adding SyncfusionBlazor Service in Startup.cs

Adding TreeMap component to an application

Add labels in TreeMap items

Add title to TreeMap

Apply color mapping

Enable legend

Enable tooltip

See also