Ej1 api migration in Angular Treemap component

4 Apr 202324 minutes to read

This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.

Data Binding

Behavior API in Essential JS 1 API in Essential JS 2
Datasource Property: dataSource

Ts: @Component({templateUrl: <ej-treemap id="treemap" [dataSource]="datasource"></ej-treemap>})

export class DefaultComponent {constructor(public treemapDataService: TreeMapDataService) {

datasource:any= treemapDataService.getTreemapData();}

} 		Property: dataSource

Ts: @Component({templateUrl: <ejs-treemap id="treemap" [weightValuePath]='weightValuePath' [dataSource]="datasource"></ejs-treemap>})

export class DefaultComponent {

weightValuePath: string = 'Population';dataSource: object[] = [{ Continent: "Asia", population: 1749046000}];

}

Appearance

Behavior API in Essential JS 1 API in Essential JS 2
Layout Property: itemsLayoutMode

<ej-treemap id="treemap" itemsLayoutMode= "sliceanddiceauto" ></ej-treemap> 		Property: layoutType

<ejs-treemap id="treemap" layoutType='SliceAndDiceAuto'></ejs-treemap>
Weight Value Path Property: weightValuePath

<ej-treemap id="treemap" weightValuePath= "Population" ></ej-treemap> 		Property: weightValuePath

<ejs-treemap id="treemap" weightValuePath= 'Population' ></ejs-treemap>
Range Color Value Path Property: colorValuePath

<ej-treemap id="treemap" colorValuePath= "Continent"></ej-treemap> 		Property: rangeColorValuePath

<ejs-treemap id="treemap" rangeColorValuePath= 'Continent' ></ejs-treemap>
Equal Color Value Path Not Applicable Property: equalColorValuePath

<ejs-treemap id="treemap" equalColorValuePath= 'Asia' ></ejs-treemap>
Height Property: height

<ej-treemap id="treemap" height= 50 ></ej-treemap> 		Property: height

<ejs-treemap id="treemap" height='50px' ></ejs-treemap>
Width Property: width

<ej-treemap id="treemap" width= 400 ></ej-treemap> 		Property: width

<ejs-treemap id="treemap" width= '400px' ></ejs-treemap>
Theme Not Applicable Property: theme

<ejs-treemap id="treemap" theme= 'Highcontrast' ></ejs-treemap>
Localization Property: locale

<ej-treemap id="treemap" locale= "en-US"></ej-treemap> 		Property: locale

<ejs-treemap id="treemap" locale= 'en-US' ></ejs-treemap>
Palette Colors Property: paletteColorMapping.colors

<ej-treemap id="treemap" [paletteColorMapping]= "paletteColorMapping"></ej-treemap>

paletteColorMapping:any={ colors: ['red','green'] } 		Property: palette

<ejs-treemap id="treemap" [palette]="palette"></ejs-treemap>

palette: string[] =['red','green']
Margin Not Applicable Property: margin

<ejs-treemap id="treemap" [margin]="margin"></ejs-treemap>

margin:object={ left: 5, top: 8 }
Resize Property: enableResize

<ej-treemap id="treemap" enableResize=" true" ></ej-treemap> 		Not Applicable
Responsive Property: isResponsive

<ej-treemap id="treemap" isResponsive= "true"></ej-treemap> 		Not Applicable

Leaf Items

Behavior API in Essential JS 1 API in Essential JS 2
Border Color Property: leafItemSettings.borderBrush

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={ showLabels: true, borderBrush: "blue" } 		Property: leafItemSettings.border

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={border: { color: 'white' }}
Border Width Property: leafItemSettings.borderThickness

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={showLabels: true,borderThickness: 5} 		Property: leafItemSettings.border

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={border: { width: 5 } }
Gap Value Property: leafItemSettings.gap

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={showLabels: true,gap: 5 } 		Property: leafItemSettings.gap

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={gap: 5}
Leaf Item Label Property: leafItemSettings.itemTemplate

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={showLabels: true, itemTemplate: "template"} 		Property: leafItemSettings.labelTemplate

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={labelTemplate: 'template'}
Leaf Label Path Property: leafItemSettings.labelPath

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={showLabels: true, labelPath: "GameName"} 		Property: leafItemSettings.labelPath

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={labelPath: 'GameName'}
Leaf Label Position Property: leafItemSettings.labelPosition

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={ showLabels: true, labelPosition: "topcenter"} 		Property: leafItemSettings.labelPosition

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={labelPosition: 'Center'}
Leaf Label Color Not Applicable Property: leafItemSettings.fill

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={fill: 'red'}
Random Colors Not Applicable Property: leafItemSettings.autoFill

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={autoFill: true }
Format Not Applicable Property: leafItemSettings.labelFormat

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={ labelFormat: '${Continent}-${Population}'}
Labels Visibility Property: leafItemSettings.showLabels

<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>

leaf: any={showLabels: true } 		Property: leafItemSettings.showLabels

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={ showLabels: false}
Opacity Not Applicable Property: *leafItemSettings.opacity *

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={opacity: 0.7}
Padding Not Applicable Property: *leafItemSettings.padding *

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={padding: 5}
Font Customization Not Applicable Property: leafItemSettings.labelStyle

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={labelStyle: { size: '12px', color: 'red', opacity: 0.5 }}
Position of Template Not Applicable Property: leafItemSettings.templatePosition

<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>

leafItem: object={templatePosition: 'Center'}

Legend

Behavior API in Essential JS 1 API in Essential JS 2
Legend Alignment Property: legendSettings.alignment

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={ alignment: "far"} 		Property: legendSettings.alignment

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={ legendSettings: { alignment: 'Near'}
Legend Visibility Property: showLegend

<ej-treemap id="treemap" [showLegend]="false"></ej-treemap> 		Property: legendSettings.visible

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={visible: true}
Legend Position Property: legendSettings.dockPosition

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={dockPosition: "bottom"} 		Property: legendSettings.position

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={position: 'Top' }
Legend Height Property: legendSettings.height

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={height: 40} 		Property: legendSettings.height

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={ height: '40px' }
Legend Width Property: legendSettings.width

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={width: 100 } 		Property: legendSettings.width

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={ width: '100px' }
Shape Height Property: legendSettings.iconHeight

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={iconHeight: 15 } 		Property: legendSettings.shapeHeight

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={ shapeHeight: '40px' }
Shape Width Property: legendSettings.iconWidth

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={iconWidth: 8 } 		Property: legendSettings.shapeWidth

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={shapeWidth: '40px'}
Padding Not Applicable Property: legendSettings.shapePadding

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={shapePadding: 10}
Legend Title Property: legendSettings.title

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={title: "Population" } 		Property: legendSettings.title

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={title: 'Legend' }
Legend Shape Not Applicable Property: legendSettings.shape

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={ shape: 'Rectangle' }
Legend Mode Property: legendSettings.mode

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={mode: "interactive" } 		Property: legendSettings.mode

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={mode: 'Interactive'}
Legend Text Customization Not Applicable Property: legendSettings.textStyle

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={textStyle: { size: '10px', opacity: 0.5, color: 'red' }}
Legend Title Customization Not Applicable Property: legendSettings.titleStyle

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={titleStyle: { size: '10px', opacity: 0.5, color: 'red' }}
Legend Shape Border Not Applicable Property: legendSettings.shapeBorder

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={shapeBorder: { width: 2, color: 'red' }}
Legend Template Property: legendSettings.template

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={ template: "template"} 		Not Applicable
Left Label Property: legendSettings.leftLabel

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={} 		Not Applicable
Right Label Property: legendSettings.rightLabel

<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>

legend: any={} 		Not Applicable
Legend Shape Image Not Applicable Property: legendSettings.imageUrl

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={imageUrl: "image.png"}
Position in Intractive Legend Not Applicable Property: legendSettings.labelPosition

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={labelPosition: "Center" }
Legend Location Not Applicable Property: legendSettings.location

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={location: { x: 10, y: 20 }}
Legend Orientation Not Applicable Property: legendSettings.orientation

<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>

TreeMap.Inject(TreeMapLegend);

legend: object={orientation: "Horizontal" }

Levels

Behavior API in Essential JS 1 API in Essential JS 2
Random Colors Not Applicable Property: levels.autoFill

<ejs-treemap id="treemap"> <e-levels><e-level autoFill="true"></e-level></e-levels></ejs-treemap>
Level Background Color Property: levels.groupBackground

<ej-treemap id="treemap"> <e-levels><e-level groupBackground= "white" ></e-level></e-levels></ej-treemap> 		Property: levels.fill

<ejs-treemap id="treemap"> <e-levels><e-level fill= 'white'></e-level> </e-levels></ejs-treemap>
Level Border Color Property: levels.groupBorderColor

<ej-treemap id="treemap"> <e-levels><e-level groupBorderColor="#58585B"></e-level></e-levels></ej-treemap> 		Property: levels.border.color

<ejs-treemap id="treemap"><e-levels><e-level [border]="border"></e-level></e-levels></ejs-treemap>

border:object={color: "#58585B"}
Level Border Width Property: levels.groupBorderThickness

<ej-treemap id="treemap"><e-levels><e-level groupBorderThickness= 2></e-level></e-levels></ej-treemap> 		Property: levels.border.width

<ejs-treemap id="treemap"> <e-levels><e-level [border]="border"> </e-level> </e-levels></ejs-treemap>

border:object={width: 2}
Group Gap Property: levels.groupGap

<ej-treemap id="treemap"><e-levels><e-level groupGap= 2 ></e-level></e-levels></ej-treemap> 		Property: levels.groupGap

<ejs-treemap id="treemap"><e-levels><e-level groupGap= 2 ></e-level></e-levels></ejs-treemap>
Group Padding Property: levels.groupPadding

<ej-treemap id="treemap"><e-levels><e-level groupPadding= 1 ></e-level></e-levels></ej-treemap> 		Property: levels.groupPadding

<ejs-treemap id="treemap"><e-levels><e-level groupPadding= 1></e-level> </e-levels></ejs-treemap>
Group Path Property: levels.groupPath

$<ej-treemap id="treemap"><e-levels><e-level groupPath="pathname"></e-level></e-levels></ej-treemap> 		Property: levels.groupPath

<ejs-treemap id="treemap"><e-levels><e-level groupPath='pathname'> </e-level></e-levels></ejs-treemap>
Height of Header Level Property: levels.headerHeight

<ej-treemap id="treemap"><e-levels><e-level headerHeight= 20 ></e-level> </e-levels></ej-treemap> 		Property: levels.headerHeight

<ejs-treemap id="treemap"> <e-levels><e-level headerHeight= 20></e-level></e-levels></ejs-treemap>
Header Template Property: levels.headerTemplate

<ej-treemap id="treemap"> <e-levels><e-level headerTemplate= "template"></e-level></e-levels></ej-treemap> 		Property: levels.headerTemplate

<ejs-treemap id="treemap"> <e-levels><e-level headerTemplate= 'template' ></e-level></e-levels></ejs-treemap>
Opacity of Color Not Applicable Property: levels.opacity

<ejs-treemap id="treemap"> <e-levels><e-level opacity=0.5></e-level></e-levels></ejs-treemap>
Header Visibility Property: levels.showHeader

<ej-treemap id="treemap"> <e-levels><e-level showHeader="false"></e-level> </e-levels></ej-treemap> 		Property: levels.showHeader

<ejs-treemap id="treemap"> <e-levels><e-level showHeader= "false"></e-level></e-levels></ejs-treemap>
Template Position Property: levels.labelPosition

<ej-treemap id="treemap"><e-levels><e-level labelPosition= "topleft" ></e-level></e-levels></ej-treemap> 		Property: levels.templatePosition

<ejs-treemap id="treemap"><e-levels><e-level templatePosition='Center'> </e-level></e-levels></ejs-treemap>
Header Style Not Applicable Property: levels.headerStyle

<ejs-treemap id="treemap"> <e-levels><e-level [headerStyle]="headerStyle" ></e-level></e-levels></ejs-treemap>

headstyle: object={ color: 'red', size: '16px', opacity: 0.7}
Header Format Not Applicable Property: levels.headerFormat

<ejs-treemap id="treemap"> <e-levels><e-level headerFormat= '${Continent}' </e-level></e-levels></ejs-treemap>
Header Alignment Not Applicable Property: levels.headerAlignment

<ejs-treemap id="treemap"><e-levels><e-level headerAlignment= 'Center' ></e-level></e-levels></ejs-treemap>

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selection Property: selectionMode

<ej-treemap id="treemap" selectionMode= "default"></ej-treemap> 		Property: selectionSettings.mode

<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>

TreeMap.Inject(TreeMapSelection);

selection: object={enable: true, mode: 'Item'}
Selection Color Not Applicable Property: selectionSettings.fill

<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>

TreeMap.Inject(TreeMapSelection);

selection: object={enable: true, fill: 'blue'}
Selection Color Opacity Not Applicable Property: selectionSettings.opacity

<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>

TreeMap.Inject(TreeMapSelection);

selection: object={enable: true, fill: 'blue', opacity: 0.6 }
Border for selection Not Applicable Property: selectionSettings.border

<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>

TreeMap.Inject(TreeMapSelection);

selection: object={border: { color: 'red', width: 2 }}

Hightlight

Behavior API in Essential JS 1 API in Essential JS 2
Highlight Group Selection Mode Property: highlightGroupOnSelection

<ej-treemap id="treemap" highlightGroupOnSelection= "true" ></ej-treemap> 		Property: highlightSettings.mode

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={enable: true, mode: 'All' }
Highlight Selection Mode Property: highlightOnSelection

<ej-treemap id="treemap" highlightGroupOnSelection= "true" ></ej-treemap> 		Property: highlightSettings.mode

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={ enable: true, mode: 'Item'}
Highlight Group Border Color Property: highlightGroupBorderBrush

<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightGroupBorderBrush= 'gray' ></ej-treemap> 		Property: highlightSettings.border.color

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={ enable: true, mode: 'All',border: { color: 'gray' }}
Highlight Group Border Width Property: highlightGroupBorderThickness

<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightGroupBorderThickness= 3 ></ej-treemap> 		Property: highlightSettings.border.width

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={ enable: true, mode: 'All', border: { width: 3 }}
Highlight Selection Border Color Property: highlightBorderBrush

<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightBorderBrush= 'gray ></ej-treemap> 		Property: highlightSettings.border.color

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={enable: true, mode: 'Item', border: { color: 'gray' }}
Highlight Selection Border Width Property: highlightBorderThickness

<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightBorderThickness=3></ej-treemap> 		Property: highlightSettings.border.width

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={enable: true, mode: 'Item', border: { width: 3 }}
Highlight Color Not Applicable Property: highlightSettings.fill

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={enable: true, fill: 'red' }
Highlight Color Opacity Not Applicable Property: highlightSettings.opacity

<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>

TreeMap.Inject(TreeMapHighlight);

highlight: object={enable: true, fill: 'red', opacity: 0.5}

Range ColorMapping

Behavior API in Essential JS 1 API in Essential JS 2
From value Property: rangeColorMapping.from

<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor from: 1000></e-rangecolor></e-rangecolormapping></ej-treemap> 		Property: leafItemSettings.colorMapping.from

<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ from: 1000 }}
To value Property: rangeColorMapping.to

<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor to= 100000 ></e-rangecolor></e-rangecolormapping> </ej-treemap> 		Property: leafItemSettings.colorMapping.to

<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ to: 100000 }}
Color Property: rangeColorMapping.color

<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor color= "#77D8D8" ></e-rangecolor></e-rangecolormapping> </ej-treemap> 		Property: leafItemSettings.colorMapping.color

<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ color: "#77D8D8" }}
Legend Label Property: rangeColorMapping.legendLabel

<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor legendLabel= "Growth"></e-rangecolor></e-rangecolormapping></ej-treemap> 		Property: leafItemSettings.colorMapping.label

<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ label: "Growth" }}

Desaturation ColorMapping

Behavior API in Essential JS 1 API in Essential JS 2
From value Property: desaturationColorMapping.from

<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>

leaf: any={ from:1000} 		Property: leafItemSettings.colorMapping.from

<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ from: 1000 }]}
To value Property: desaturationColorMapping.to

<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>

leaf: any={to:10000} 		Property: leafItemSettings.colorMapping.to

<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ to: 10000 }]}
Color Property: desaturationColorMapping.color

<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>

leaf: any={color:"blue"} 		Property: leafItemSettings.colorMapping.color

<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ color:"blue" }]}
Value Not Applicable Property: leafItemSettings.colorMapping.value

<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ value="India" }]}
Minimum Opacity Property: desaturationColorMapping.rangeMinimum

<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>

leaf: any={rangeMinimum: 1} 		Property: leafItemSettings.colorMapping.minOpacity

<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ minOpacity: 0.1 }]}
Maximum Opacity desaturationColorMapping.rangeMaximum

<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>

leaf: any={rangeMaximum:10} 		Property: leafItemSettings.colorMapping.maxOpacity

<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>

leaf: object={colorMapping: [{ maxOpacity: 0.6 }]}

Tooltip

Behavior API in Essential JS 1 API in Essential JS 2
Tooltip Property: showTooltip

<ej-treemap id="treemap" showTooltip= "true" ></ej-treemap> 		Property: tooltipSettings.visible

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={ visible: true}
Tooltip Template Property: tooltipTemplate

<ej-treemap id="treemap" showTooltip= "true" tooltipTemplate= 'template' ></ej-treemap> 		Property: tooltipSettings.template

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={template: 'template' }
Tooltip Border Not Applicable Property: tooltipSettings.border

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={border: { color: 'red', width: 2 }}
Tooltip Color Not Applicable Property: tooltipSettings.fill

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={fill: 'gray'}
Tooltip Format Not Applicable Property: tooltipSettings.format

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={format: '${Population}' }
Tooltip Marker Shape Not Applicable Property: tooltipSettings.markerShapes

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={ markerShapes: 'Circle'}
Tooltip Color Opacity Not Applicable Property: tooltipSettings.opacity

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={opacity: 0.5}
Tooltip Text Style Not Applicable Property: tooltipSettings.textStyle

<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>

tooltip: object={ textStyle: { Color: 'red', opacity: 0.5, size: '12px' }}

Drilldown

Behavior API in Essential JS 1 API in Essential JS 2
Drilldown Property: enableDrillDown

<ej-treemap id="treemap" enableDrillDown= "true" ></ej-treemap> 		Property: enableDrillDown

<ejs-treemap id="treemap" enableDrillDown="true" ></ejs-treemap>
Drilldown Level Property: drillDownLevel

<ej-treemap id="treemap" drillDownLevel= 1 ></ej-treemap> 		Property: InitialDrillSettings.groupIndex

<ejs-treemap id="treemap" [ InitialDrillSettings]=initialDrill ></ejs-treemap>
</br>initialDrill: object={ groupIndex: 1}

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Treemap Refresh Method Method: refresh

var treemap =   $("#container").ejTreeMap("instance"); treemap.refresh(); 		Method: refresh

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.refresh();
Method to Drilldown Method: drillDown

var treemap =   $("#container").ejTreeMap("instance"); treemap.drillDown(); 		Not Applicable
Append to Method Not Applicable Method: appendTo

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.appendTo();
Add Event Listener Method Not Applicable Method: addEventListener

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.addEventListener();
Treemap Destroy Method Not Applicable Method: destroy

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.destroy();
Treemap Exporting Method Not Applicable Method: export

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.export();
Get the Module Name Not Applicable Method: getModuleName

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.getModuleName();
Printing the Treemap Not Applicable Method: print

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.print();
Resizing the Treemap Not Applicable Method: resizeOnTreeMap

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.resizeOnTreeMap();
Inject Method (Tooltip) Not Applicable Method: resizeOnTreeMap

TreeMap.Inject(TreeMapTooltip);
TreeMap.Inject(TreeMapTooltip); var treemap =   document.getElementById('container').ej2_instances[0]; treemap.resizeOnTreeMap();
Remove Event Listener Method Not Applicable Method: removeEventListener

var treemap =   document.getElementById('container').ej2_instances[0]; treemap.removeEventListener();

Events

Behavior API in Essential JS 1 API in Essential JS 2
Treemap Load Event Not Applicable Event: load

<ejs-treemap id="treemap" (load)='load($event)'></ejs-treemap>

public load = (args: ILoadEventArgs) => {}
Treemap Loaded Event Not Applicable Event: loaded

<ejs-treemap id="treemap" (loaded)='loaded($event)'></ejs-treemap>

public loaded = (args: ILoadedEventArgs) => {}
Event Before Print Not Applicable Event: beforePrint

<ejs-treemap id="treemap" (beforePrint)='beforePrint($event)'></ejs-treemap>

public beforePrint = (args: IPrintEventArgs) => {}
Click Event Event: click

<ej-treemap id="treemap" (click)="Click($event)"></ej-treemap>

Click(sender) {} 		Event: click

<ejs-treemap id="treemap" (click)='click($event)'></ejs-treemap>

public click = (args: IItemClickEventArgs) => {}
Drill Start Event Event: drillStarted

<ej-treemap id="treemap" (drillStarted)="drillStarted($event)"></ej-treemap>

drillStarted(sender) {} 		Event: drillStart

<ejs-treemap id="treemap" (drillStart)='drillStart($event)'></ejs-treemap>

public drillStart = (args: IDrillStartEventArgs) => {}
Drill End Event Not Applicable Event: drillEnd

<ejs-treemap id="treemap" (drillEnd)=' drillEnd($event)'></ejs-treemap>

public drillEnd = (args: IDrillEndEventArgs) => {}
Event on Item Click Not Applicable Event: itemClick

<ejs-treemap id="treemap" (itemClick)='itemClick($event)'></ejs-treemap>

public itemClick = (args: IItemClickEventArgs) => {}
Treemap Item Select Event Event: treeMapItemSelected

<ej-treemap id="treemap" (treeMapItemSelected)="treeMapitemselected($event)"></ej-treemap>

treeMapItemSelected(sender) {} 		Event: itemSelected

<ejs-treemap id="treemap" (itemSelected)=' itemSelected($event)'></ejs-treemap>

public itemSelected = (args: IItemSelectedEventArgs) => {}
Treemap Item Rendering Event Event: itemRendering

<ej-treemap id="treemap" (itemRendering)="itemRendering($event)"></ej-treemap>

itemRendering(sender) {} 		Event: itemRendering

<ejs-treemap id="treemap" (itemRendering)='itemRendering($event)'></ejs-treemap>

public itemRendering = (args: IItemRenderingEventArgs) => {}
Treemap Item Move Event Not Applicable Event: itemMove

<ejs-treemap id="treemap" (itemMove)='itemMove($event)'></ejs-treemap>

public itemMove = (args: IItemMoveEventArgs) => {}
Treemap Item Highlight Event Not Applicable Event: itemHighlight

<ejs-treemap id="treemap" (itemHighlight)='itemHighlight($event)'></ejs-treemap>

public itemHighlight = (args: IItemHighlightEventArgs) => {}
Template Header Render Event Event: headerTemplateRendering

<ej-treemap id="treemap" (headerTemplateRendering)="headerTemplateRendering($event)"></ej-treemap>

headerTemplateRendering(sender) {} 		Not Applicable
Drilldown Item Select Event Event: drillDownItemSelected

<ej-treemap id="treemap" ( drillDownItemSelected)=" drillDownItemSelected($event)"></ej-treemap>

drillDownItemSelected(sender) {} 		Not Applicable
Refresh Event Event: refreshed

<ej-treemap id="treemap" (refreshed)="refreshed($event)"></ej-treemap>

refreshed(sender) {} 		Not Applicable
Group Select Event Event: treeMapGroupSelected

<ej-treemap id="treemap" (treeMapGroupSelected)="treeMapGroupSelected($event)"></ej-treemap>

treeMapGroupSelected(sender) {} 		Not Applicable
Mouse Event Not Applicable Event: mouseMove

<ejs-treemap id="treemap" (mouseMove)='mouseMove($event)'></ejs-treemap>

public mouseMove = (args: IMouseMoveEventArgs) => {}
Resize Event Not Applicable Event: resize

<ejs-treemap id="treemap" ( resize)=' resize($event)'></ejs-treemap>

public resize = (args: IResizeEventArgs) => {}
Tooltip Render Event Not Applicable Event: tooltipRendering

<ejs-treemap id="treemap" (tooltipRendering)='tooltipRendering($event)'></ejs-treemap>

public tooltipRendering = (args: ITreeMapTooltipRenderEventArgs) => {}
Double Click Event Event: doubleClick

<ej-treemap id="treemap" (doubleClick)="doubleClick($event)"></ej-treemap>

doubleClick(sender) {} 		Not Applicable
Right Click Event Event: rightClick

<ej-treemap id="treemap" (rightClick)="rightClick($event)"></ej-treemap>

rightClick(sender) {} 		Not Applicable