Search results

Color Mapping in ASP.NET Core TreeMap control

25 Oct 2021 / 2 minutes to read

Color mapping is used to customize the color for each group or item based on the specified types. The following options are available to customize the group and leaf items in the TreeMap.

Range color mapping

Range color mapping is used to apply color to the items by giving specific ranges in the DataSource, and it should be specifying the data source properties to the rangeColorValuePath. The color mapping ranges to be specified in the from and to properties of the colorMapping.

tagHelper
range.cs
Copied to clipboard
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
            <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
Copied to clipboard
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 with color mapping

Equal color mapping

Equal color mapping is used to fill colors to each item by specifying equal value present in the data source, that can be specified in the equalColorValuePath property.

tagHelper
equal.cs
Copied to clipboard
@{ 
   var colorMaps = new[]{
               new { from=500, to=3000, color='orange' },
			   new { from=3000, to=5000, color='green' }
            };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" rangeColorValuePath="count">
            <e-treemap-leafitemsettings labelPath="fruit" colorMapping="colorMaps"></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;
    }
</script>
Copied to clipboard
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 with equal color mapping

Desaturation color mapping

Desaturation color mapping is used to apply colors to the items based on minOpacity and maxOpacity properties in the colorMapping.

tagHelper
desaturation.cs
Copied to clipboard
@{ 
   var colorMaps = new[]{
               new {from=500,to=3000, minOpacity=0.2,maxOpacity=0.5,color='orange'},
			   new {from=3000,to=5000, minOpacity=0.5,maxOpacity=0.8,color='green'},
            };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="count" rangeColorValuePath="count">
            <e-treemap-leafitemsettings labelPath="fruit" colorMapping="colorMaps"></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;
    }
</script>
Copied to clipboard
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 with desaturation color mapping

Palette color mapping

The palette color mapping is used to fill the color to each group or leaf item by given colors in the palette property.

tagHelper
pallete.cs
Copied to clipboard
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
            <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
Copied to clipboard
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 with palette color mapping

Desaturation with multiple colors

Multiple colors are used as gradient effect to specific shapes based on the ranges in datasource. By using [color] property, you can set n number of colors.

tagHelper
pallete.cs
Copied to clipboard
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
            <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
Copied to clipboard
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();
        }
    }
}

Multiple color mapping in TreeMap with desaturation

Color for items excluded from color mapping

Get the excluded ranges from data source using the color mapping and apply the specific color to those items, without specifying the from and to properties.

tagHelper
excludecolor.cs
Copied to clipboard
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
            <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
Copied to clipboard
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 color mapping for excluded items

Bind the colors to the items from data source

To set the color for each item from the data source, bind the data source property to the colorValuePath.

tagHelper
multiplecolor.cs
Copied to clipboard
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
            <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
Copied to clipboard
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();
        }
    }
}

Bind the colors to TreeMap from datasource