Search results

Getting Started

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

Importing Syncfusion Blazor component in an application

  1. Install Syncfusion.EJ2.Blazor NuGet package in an application using the NuGet Package Manager. Make sure to check the Include prerelease option.
  2. Add the client-side resources through CDN in the <head> element of the ~/wwwroot/index.html page.
<head>
    <environment include="Development">
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
     </environment>
</head>

Adding component package to an application

Open the ~/_Imports.razor file and import Syncfusion.EJ2.Blazor.TreeMap

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

Adding TreeMap component to an application

Now, add the Syncfusion Blazor TreeMap component in any web page razor in the Pages folder. For example, the TreeMap component can be added to the ~/Pages/Index.razor page.

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

<EjsTreemap DataSource="@growthReport"
            WeightValuePath="GDP"
            TValue="Country">
</EjsTreemap>

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

Run the application

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

You can add label text to the leaf items in TreeMap component using LabelPath and it provides information to the user about the leaf items.

<EjsTreemap DataSource="@growthReport"
            WeightValuePath="GDP"
            TValue="Country">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray"></TreeMapLeafItemSettings>
</EjsTreemap>

Refer code block to know the property value of growthReport.

TreeMap with label

Add title to TreeMap

You can add a title using TreeMapTitleSettings to provide quick information to the user about the items rendered in the TreeMap.

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

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

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

<EjsTreemap 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="@("Orange")"></TreeMapLeafColorMapping>
            <TreeMapLeafColorMapping From="3000" To="20000" Color="@("Green")"></TreeMapLeafColorMapping>
        </TreeMapLeafColorMappings>
    </TreeMapLeafItemSettings>
</EjsTreemap>

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.

<EjsTreemap 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="@("Orange")"></TreeMapLeafColorMapping>
            <TreeMapLeafColorMapping From="3000" To="20000" Color="@("Green")"></TreeMapLeafColorMapping>
        </TreeMapLeafColorMappings>
    </TreeMapLeafItemSettings>
    <TreeMapLegendSettings Visible="true"></TreeMapLegendSettings>
</EjsTreemap>

Refer code block to know the property value of growthReport.

TreeMap with legend

Enable tooltip

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.

<EjsTreemap 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="@("Orange")"></TreeMapLeafColorMapping>
            <TreeMapLeafColorMapping From="3000" To="20000" Color="@("Green")"></TreeMapLeafColorMapping>
        </TreeMapLeafColorMappings>
    </TreeMapLeafItemSettings>
    <TreeMapLegendSettings Visible="true"></TreeMapLegendSettings>
    <TreeMapTooltipSettings Visible="true"></TreeMapTooltipSettings>
</EjsTreemap>

Refer code block to know the property value of growthReport.

TreeMap with legend

See also