Search results

Selection and Highlight

Selection

Selection is used to select a particular group or item to differentiate from other items. Each item or each group can be selected and deselected when interacting with the items.

By tapping a specific legend, the TreeMap items bound to the selected legend are also selected and vice-versa.

The layer Fill property is used to change the selected item color. The Color and Width properties are used to customize the selected item’s border.

The selection is enabled using the Enable property in the TreeMapSelectionSettings tag.

Tree map selection is shown in the following example.

@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="EmployeeCount" TValue="Employee"
            DataSource="@employees">
    <TreeMapLeafItemSettings LabelPath="JobDescription" Fill="#8ebfe2"></TreeMapLeafItemSettings>
    <TreeMapLevels>
        <TreeMapLevel GroupPath="Country" Fill="#c5e2f7">
        </TreeMapLevel>
        <TreeMapLevel GroupPath="JobDescription" Fill="#a4d1f2">
        </TreeMapLevel>
        <TreeMapLevel GroupPath="JobGroup" Fill="#a4d1f2">
        </TreeMapLevel>
    </TreeMapLevels>
    <TreeMapSelectionSettings Enable="true" Fill="blue">
        <TreeMapSelectionBorder Color="black" Width="0.5"></TreeMapSelectionBorder>
    </TreeMapSelectionSettings>
</EjsTreeMap>

@code{
    public class Employee
    {
        public string Country;
        public string JobDescription;
        public string JobGroup;
        public int EmployeeCount;
    };

    private List<Employee> employees = new List<Employee> {
        new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Executive", EmployeeCount= 20 },
        new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Analyst", EmployeeCount= 30 },
        new Employee { Country= "USA", JobDescription= "Marketing", EmployeeCount= 40 },
        new Employee { Country= "USA", JobDescription= "Management", EmployeeCount= 80 },
        new Employee { Country= "India", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 100 },
        new Employee { Country= "India", JobDescription= "HR Executives", EmployeeCount= 30 },
        new Employee { Country= "India", JobDescription= "Accounts", EmployeeCount= 40 },
        new Employee { Country= "UK", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 30 },
        new Employee { Country= "UK", JobDescription= "HR Executives", EmployeeCount= 50 },
        new Employee { Country= "UK", JobDescription= "Accounts", EmployeeCount= 60 }
    };
}

TreeMap item with selection option

Highlight

Highlight is used to highlight an item or group from other items or groups. Each item or each group can be highlighted when hovering the mouse over items.

By hovering over a specific legend, the TreeMap items bound to the selected legend are also highlighted and vice-versa.

The layer Fill property is used to change the highlighted item color. The Color and Width properties are used to customize the highlighted shape border. You can highlight an item by hovering the mouse over the item. The highlight is enabled using the Enable property in the TreeMapHighlightSettings tag.

The following code example demonstrates how to highlight an item.

@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="EmployeeCount"
            TValue="Employee"
            DataSource="@employees">
    <TreeMapLeafItemSettings LabelPath="JobDescription" Fill="#8ebfe2"></TreeMapLeafItemSettings>
    <TreeMapLevels>
        <TreeMapLevel GroupPath="Country" Fill="#c5e2f7">
        </TreeMapLevel>
        <TreeMapLevel GroupPath="JobDescription" Fill="#a4d1f2">
        </TreeMapLevel>
        <TreeMapLevel GroupPath="JobGroup" Fill="#a4d1f2">
        </TreeMapLevel>
    </TreeMapLevels>
    <TreeMapHighlightSettings Enable=true Fill="blue">
        <TreeMapHighlightBorder Color="black" Width="0.3">
        </TreeMapHighlightBorder>
    </TreeMapHighlightSettings>
</EjsTreeMap>

Refer code block to know the property value of employees.

TreeMap item with highlight option