Color mapping in React Treemap component
Apply color mapping
The color mapping feature supports customization of item colors based on the underlying value of each item received from the bound data source. Specify the field name whose values will be compared for each item using the equalColorValuePath or rangeColorValuePath property.
The color mapping feature allows you to customize item colors based on the underlying values in the data source. Specify the field whose values should be evaluated using the equalColorValuePath or rangeColorValuePath property.
Color mapping can be applied to both group and leaf items in the TreeMap. The following color mapping types are supported:
- Range color mapping
- Equal color mapping
- Desaturation color mapping
- Palette color mapping
- Desaturation with multiple colors
- Color for items excluded from color mapping
The following example demonstrates how to apply color mapping in a TreeMap:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return (
<TreeMapComponent
height="350px"
dataSource={[
{
Title: 'State wise International Airport count in South America',
State: 'Brazil',
Count: 25,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Colombia',
Count: 12,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Argentina',
Count: 9,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Ecuador',
Count: 7,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Chile',
Count: 6,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Peru',
Count: 3,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Venezuela',
Count: 3,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Bolivia',
Count: 2,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Paraguay',
Count: 2,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Uruguay',
Count: 2,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Falkland Islands',
Count: 1,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'French Guiana',
Count: 1,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Guyana',
Count: 1,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Suriname',
Count: 1,
Brand: 'Ford',
},
]}
weightValuePath="Count"
equalColorValuePath="Brand"
leafItemSettings={{
labelPath: 'State',
colorMapping: [
{
value: 'Ford',
color: '#634D6F',
},
{
value: 'Maruti',
color: '#B34D6D',
},
],
}}
></TreeMapComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return (
<TreeMapComponent
height="350px"
dataSource={[
{
Title: 'State wise International Airport count in South America',
State: 'Brazil',
Count: 25,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Colombia',
Count: 12,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Argentina',
Count: 9,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Ecuador',
Count: 7,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Chile',
Count: 6,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Peru',
Count: 3,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Venezuela',
Count: 3,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Bolivia',
Count: 2,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Paraguay',
Count: 2,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Uruguay',
Count: 2,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Falkland Islands',
Count: 1,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'French Guiana',
Count: 1,
Brand: 'Ford',
},
{
Title: 'State wise International Airport count in South America',
State: 'Guyana',
Count: 1,
Brand: 'Maruti',
},
{
Title: 'State wise International Airport count in South America',
State: 'Suriname',
Count: 1,
Brand: 'Ford',
},
]}
weightValuePath="Count"
equalColorValuePath="Brand"
leafItemSettings={{
labelPath: 'State',
colorMapping: [
{
value: 'Ford',
color: '#634D6F',
},
{
value: 'Maruti',
color: '#B34D6D',
},
],
}}
></TreeMapComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:3000,
color:'orange'
},
{
from:3000,
to:5000,
color:'green'
}
]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:3000,
color:'orange'
},
{
from:3000,
to:5000,
color:'green'
}
]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
equalColorValuePath='Brand'
leafItemSettings={{
labelPath: 'Car',
colorMapping:[
{
value:'Ford',
color:'green'
},
{
value:'Audi',
color:'red'
},
{
value:'Maruti',
color:'orange'
}
]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
equalColorValuePath='Brand'
leafItemSettings={{
labelPath: 'Car',
colorMapping:[
{
value:'Ford',
color:'green'
},
{
value:'Audi',
color:'red'
},
{
value:'Maruti',
color:'orange'
}
]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Desaturation color mapping
Desaturation color mapping is used to apply colors to the items based on the minOpacity and maxOpacity properties in the colorMapping.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:3000,
minOpacity:0.2,
maxOpacity:0.5,
color:'orange'
},
{
from:3000,
to:5000,
minOpacity:0.5,
maxOpacity:0.8,
color:'green'
}
]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:3000,
minOpacity:0.2,
maxOpacity:0.5,
color:'orange'
},
{
from:3000,
to:5000,
minOpacity:0.5,
maxOpacity:0.8,
color:'green'
}
]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
palette= {['red','green']}
weightValuePath='count'
leafItemSettings={{
labelPath: 'Car'
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
palette= {['red','green']}
weightValuePath='count'
leafItemSettings={{
labelPath: 'Car'
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:2500,
color:['orange','pink']
},
{
from:3000,
to:5000,
color:['green','red','blue']
}]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:2500,
color:['orange','pink']
},
{
from:3000,
to:5000,
color:['green','red','blue']
}]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:2500,
color:'orange'
},
{
from:3000,
to:4000,
color:'green'
},
{
color:'red'
}]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ 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 }
]}
weightValuePath='count'
rangeColorValuePath='count'
leafItemSettings={{
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:2500,
color:'orange'
},
{
from:3000,
to:4000,
color:'green'
},
{
color:'red'
}]
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);