Search results

Data Label

Data labels are used to identify the name of items or groups in the tree map control. Data Labels will be shown by given specified path in the data source field.

The following options are available to customize labels in the tree map control.

Format

You can customize the labels for each item using the [labelFormat] property in leafItemSettings.

The label format is shown in the following code example.

razor
format.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("count").LeafItemSettings(leaf => leaf.LabelPath("Car").LabelFormat("${Car}-${Brand}")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { Car: 'Mustang', Brand: 'Ford', count: 232 },
            { Car: 'EcoSport', Brand: 'Ford', count: 121 },
            { Car: 'Swift', Brand: 'Maruti', count: 143 },
            { Car: 'Baleno', Brand: 'Maruti', count: 454 },
            { Car: 'Vitara Brezza', Brand: 'Maruti', count: 545 },
            { Car: 'A3 Cabriolet', Brand: 'Audi', count: 123 },
            { car: 'RS7 Sportback', Brand: 'Audi', count: 523 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Template

The template supports customizing labels of each leaf node using the [labelTemplate] property. It uses Essential JS2 Template engine to render elements. You can position templates using the [templatePosition] property.

The template concepts are shown in the following code example.

razor
template.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("count").LeafItemSettings(leaf => leaf.LabelPath("Car").LabelTemplate("<div>{{:Car}}-{{:Brand}}</div>").TemplatePosition(Syncfusion.EJ2.TreeMap.LabelPosition.Center)).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { Car:'Mustang', Brand:'Ford', count:232 },
            { Car:'EcoSport', Brand:'Ford', count:121 },
            { Car:'Swift', Brand:'Maruti', count:143 },
            { Car:'Baleno', Brand:'Maruti', count:454 },
            { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
            { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
            { car:'RS7 Sportback', Brand:'Audi', count:523 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

InterSectAction

You can avoid overlapping by customizing labels in each item when they exceed their actual size using the [interSectAction] property in leafItemSettings.

The intersect action concepts are illustrated in the following code example.

razor
intersectaction.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("count").LeafItemSettings(leaf => leaf.LabelPath("Car").LabelFormat("${Car}-${Brand}").InterSectAction(Syncfusion.EJ2.TreeMap.LabelAlignment.WrapByWord)).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { Car: 'Mustang', Brand: 'Ford', count: 232 },
            { Car: 'EcoSport', Brand: 'Ford', count: 121 },
            { Car: 'Swift', Brand: 'Maruti', count: 143 },
            { Car: 'Baleno', Brand: 'Maruti', count: 454 },
            { Car: 'Vitara Brezza', Brand: 'Maruti', count: 545 },
            { Car: 'A3 Cabriolet', Brand: 'Audi', count: 123 },
            { car: 'RS7 Sportback', Brand: 'Audi', count: 523 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}