Color mapping is used to customize each group or item colors based on specified types of color mappings.
The following options are available to customize the group and leaf items in the tree map control.
Range color mapping is used to apply color to items by giving specific ranges in the dataSource. You should specify the datasource field in the [rangeColorValuePath
] property.
The following code example shows applying range color mapping.
@{
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>
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();
}
}
}
Equal color mapping is used to fill colors to each item by specifying equal value present in the datasource field that can be specified in the [equalColorValuePath
] property.
The following code example shows applying equal color mapping.
@{
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>
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();
}
}
}
Desaturation color mapping is used to apply colors with opacity to items based on the given values for the [minOpacity
] and [maxOpacity
] properties in the tree map control.
The following code example shows applying desaturation color mapping.
@{
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>
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();
}
}
}
Palette color mapping is used to fill the same color to each group or leaf node by given colors in the [palette
] property in tree map control.
The following code example shows applying palette color mapping.
@{
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>
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 colors are used as gradient effect to specific shapes based on the ranges in datasource.
By using color API, you can set n number of colors.
@{
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>
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();
}
}
}
Based on the ranges in the data source, get the excluded ranges from color mapping, and then apply specific color to the items.
@{
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>
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();
}
}
}
To set color for each items in treemap, bind the field name in the data source to the rangeColorValuePath
.
@{
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>
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();
}
}
}