ASP.NET Core

Search results

Layout in ASP.NET Core TreeMap control

27 Jul 2021 / 2 minutes to read

You can determine the visual representation of nodes belonging to all the tree map levels using the [layoutType] property. The available layout types are,

Squarified
SliceAndDiceVertical
SliceAndDiceHorizontal
SliceAndDiceAuto

Squarified

Squarified layout displays the nested rectangles based on aspect ratio in tree map. The rectangles will be split based on height and width of parent. The default rendering type of layout is [Squarified].

tagHelper

squarified.cs

@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="GDP" >
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
    {State:"United States", GDP:17946, percentage:11.08, Rank:1},
    {State:"China", GDP:10866, percentage: 28.42, Rank:2},
    {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
    {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
    {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
    {State:"France", GDP:2421, percentage:-9.69, Rank:6},
    {State:"India", GDP:2073, percentage:13.65, Rank:7},
    {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
    {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
    {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ];
        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();
        }
    }
}

SliceAndDiceVertical

SliceAndDiceVertical layout creates rectangles with high aspect ratio and displays them sorted vertically.

tagHelper

slice_vertical.cs

@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="GDP" layoutType='SliceAndDiceVertical' >
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
    {State:"United States", GDP:17946, percentage:11.08, Rank:1},
    {State:"China", GDP:10866, percentage: 28.42, Rank:2},
    {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
    {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
    {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
    {State:"France", GDP:2421, percentage:-9.69, Rank:6},
    {State:"India", GDP:2073, percentage:13.65, Rank:7},
    {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
    {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
    {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ];
        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();
        }
    }
}

SliceAndDiceHorizontal

SliceAndDiceHorizontal layout creates rectangles with high aspect ratio and displays them sorted horizontally.

tagHelper

slice_horizontal.cs

@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="GDP" layoutType= 'SliceAndDiceHorizontal'>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
    {State:"United States", GDP:17946, percentage:11.08, Rank:1},
    {State:"China", GDP:10866, percentage: 28.42, Rank:2},
    {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
    {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
    {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
    {State:"France", GDP:2421, percentage:-9.69, Rank:6},
    {State:"India", GDP:2073, percentage:13.65, Rank:7},
    {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
    {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
    {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ];
        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();
        }
    }
}

SliceAndDiceAuto

SliceAndDiceAuto layout creates rectangles with high aspect ratio and displays them sorted both horizontally and vertically.

tagHelper

slice_auto.cs

@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="GDP" layoutType= 'SliceAndDiceAuto' >
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
    {State:"United States", GDP:17946, percentage:11.08, Rank:1},
    {State:"China", GDP:10866, percentage: 28.42, Rank:2},
    {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
    {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
    {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
    {State:"France", GDP:2421, percentage:-9.69, Rank:6},
    {State:"India", GDP:2073, percentage:13.65, Rank:7},
    {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
    {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
    {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ];
        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();
        }
    }
}

Right-to-left rendering

The TreeMap control supports right-to-left rendering for all its elements such as nodes, tooltip, data labels, and legends.

Legend with Rtl support

If you set the enableRtl property to true, then the legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon.

tagHelper

legend-rtl.cs

@{ 
   var colorMaps = new[]{
               new { value='Ford', color='green'},
			    new { value='Audi', color='red'},
				new { value='Maruti', color='orange'},
            };
			var border= new TreeMapBorder{color='black',width=2}
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" colorValuePath= "color" enableRtl=true>
            <e-treemap-leafitemsettings labelPath="Car" ></e-treemap-leafitemsettings>
			 <e-treemap-legendsettings visible= "true" position= "Top"></e-treemap-legendsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{ Car:'Mustang', Brand:'Ford', count:232, color: '#71B081' },
                       { Car:'EcoSport', Brand:'Ford', count:121,  color: '#5A9A77' },
                       { Car:'Swift', Brand:'Maruti', count:143, color: '#498770' },
                       { Car:'Baleno', Brand:'Maruti', count:454, color: '#39776C' },
                       { Car:'Vitara Brezza', Brand:'Maruti', count:545 , color: '#266665' },
                       { Car:'A3 Cabriolet', Brand:'Audi',count:123, color: '#124F5E' }

        ];
        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();
        }
    }
}

If the enableRtl property is set to true, the tooltip data will be rendered in reverse direction.

The following example shows the format of the tooltip.

tagHelper

tooltip-rtl.cs

@{ 
   var colorMaps = new[]{
               new { value='Ford', color='green'},
			    new { value='Audi', color='red'},
				new { value='Maruti', color='orange'},
            };
			var border= new TreeMapBorder{color='black',width=2}
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" colorValuePath= "color">
            <e-treemap-leafitemsettings labelPath="fruit" ></e-treemap-leafitemsettings>
			 <e-treemap-tooltipSettings visible= "true" format="${count} : ${fruit}"></e-treemap-legendsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{ fruit:'Apple', count:5000 },
                       { fruit:'Mango', count:3000 },
                       { fruit:'Orange', count:2300 },
                       { fruit:'Banana', count:500 },
                       { fruit:'Grape', count:4300 },
                       { fruit:'Papaya', count:1200 },
                       { fruit:'Melon', count:4500 }

        ];
        args.treemap.dataSource = data;
        args.treemap.palette=['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
    }
</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();
        }
    }
}

Treemap Item Rendering Direction

By default, the direction of tree map item is TopLeftBottomRight. You can customize the rendering direction of the tree map item by setting the renderDirection property. The TreeMap can be rendered in the following four different directions. TopLeftBottomRight TopRightBottomLeft BottomRightTopLeft BottomLeftTopRight

The following example demonstrate how to render the treemap in the RTL direction with TopLeftBottomRight.

tagHelper

render-direction-one.cs

@{
    
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" >
            <e-treemap-leafitemsettings labelPath="fruit" ></e-treemap-leafitemsettings>
			 
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{ fruit:'Apple', count:5000 },
                       { fruit:'Mango', count:3000 },
                       { fruit:'Orange', count:2300 },
                       { fruit:'Banana', count:500 },
                       { fruit:'Grape', count:4300 },
                       { fruit:'Papaya', count:1200 },
                       { fruit:'Melon', count:4500 }

        ];
        args.treemap.dataSource = data;
        args.treemap.palette=['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
        args.treemap.renderDirection = 'TopLeftBottomRight';
    }
</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();
        }
    }
}

The following example demonstrate how to render the treemap in the RTL direction with TopRightBottomLeft.

tagHelper

render-direction-two.cs

@{ 
   
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" >
            <e-treemap-leafitemsettings labelPath="fruit" ></e-treemap-leafitemsettings>
			 
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{ fruit:'Apple', count:5000 },
                       { fruit:'Mango', count:3000 },
                       { fruit:'Orange', count:2300 },
                       { fruit:'Banana', count:500 },
                       { fruit:'Grape', count:4300 },
                       { fruit:'Papaya', count:1200 },
                       { fruit:'Melon', count:4500 }

        ];
        args.treemap.dataSource = data;
        args.treemap.palette=['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
        args.treemap.renderDirection = 'TopRightBottomLeft';
    }
</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();
        }
    }
}

The following example demonstrate how to render the treemap in the RTL direction with BottomRightTopLeft.

tagHelper

render-direction-three.cs

@{ 
   
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" >
            <e-treemap-leafitemsettings labelPath="fruit" ></e-treemap-leafitemsettings>
			 
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{ fruit:'Apple', count:5000 },
                       { fruit:'Mango', count:3000 },
                       { fruit:'Orange', count:2300 },
                       { fruit:'Banana', count:500 },
                       { fruit:'Grape', count:4300 },
                       { fruit:'Papaya', count:1200 },
                       { fruit:'Melon', count:4500 }

        ];
        args.treemap.dataSource = data;
        args.treemap.palette=['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
        args.treemap.renderDirection = 'TopLeftBottomRight';
    }
</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();
        }
    }
}

The following example demonstrate how to render the treemap in the RTL direction with BottomLeftTopRight.

tagHelper

render-direction-four.cs

@{ 
   
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" >
            <e-treemap-leafitemsettings labelPath="fruit" ></e-treemap-leafitemsettings>
			 
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{ fruit:'Apple', count:5000 },
                       { fruit:'Mango', count:3000 },
                       { fruit:'Orange', count:2300 },
                       { fruit:'Banana', count:500 },
                       { fruit:'Grape', count:4300 },
                       { fruit:'Papaya', count:1200 },
                       { fruit:'Melon', count:4500 }

        ];
        args.treemap.dataSource = data;
        args.treemap.palette=['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
        args.treemap.renderDirection = 'BottomLeftTopRight';
    }
</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();
        }
    }
}

Contents

Squarified
SliceAndDiceVertical
SliceAndDiceHorizontal
SliceAndDiceAuto
Right-to-left rendering
Legend with Rtl support
Tooltip with Rtl support
Treemap Item Rendering Direction

Contents

Squarified
SliceAndDiceVertical
SliceAndDiceHorizontal
SliceAndDiceAuto
Right-to-left rendering
Legend with Rtl support
Tooltip with Rtl support
Treemap Item Rendering Direction

Layout in ASP.NET Core TreeMap control

Squarified

SliceAndDiceVertical

SliceAndDiceHorizontal

SliceAndDiceAuto

Right-to-left rendering

Legend with Rtl support

Tooltip with Rtl support

Treemap Item Rendering Direction