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 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 { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' rangeColorValuePath='count'
[leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ 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 }
];
public leafItemSettings: object = {
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:3000,
color:'orange'
},
{
from:3000,
to:5000,
color:'green'
}
]
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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 { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' equalColorValuePath='Brand'
[leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{ 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 }
];
public leafItemSettings: object = {
labelPath: 'Car',
colorMapping:[
{
value:'Ford',
color:'green'
},
{
value:'Audi',
color:'red'
},
{
value:'Maruti',
color:'orange'
}
]
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Desaturation color mapping is used to apply colors to the items based on the minOpacity
and maxOpacity
properties in the colorMapping
.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' rangeColorValuePath='count'
[leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{ 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 }
];
public leafItemSettings: object = {
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'
}
]
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The palette color mapping is used to fill the color to each group or leaf item by given colors in the palette
property.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' [palette]='palette'
[leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{ 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 }
];
public leafItemSettings: object = {
labelPath: 'Car'
};
public palette: object= ['red','green'],
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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 { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' rangeColorValuePath='count' [leafItemSettings]='leafItemSettings' [legendSettings] ='legendSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{ 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 }
];
public legendSettings:object ={
visible:true
}
public leafItemSettings: object = {
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:2500,
color:['orange','pink']
},
{
from:3000,
to:5000,
color:['green','red','blue']
}
]
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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 { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' rangeColorValuePath='count' [leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{ 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 }
];
public leafItemSettings: object = {
labelPath: 'fruit',
colorMapping:[
{
from:500,
to:2500,
color:'orange'
},
{
from:3000,
to:4000,
color:'green'
},
{
color:'red'
}
]
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
To set the color for each item from the data source, bind the data source property to the colorValuePath
.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' colorValuePath='color' [leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{ fruit:'Apple', count:5000, color: 'red'},
{ fruit:'Mango', count:3000, color:'blue'},
{ fruit:'Orange', count:2300, color:'green' },
{ fruit:'Banana', count:500, color:'yellow' },
{ fruit:'Grape', count:4300, color:'orange' },
{ fruit:'Papaya', count:1200, color:'pink' },
{ fruit:'Melon', count:4500, color:'violet' }
];
public leafItemSettings: object = {
labelPath: 'fruit'
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);