Ej1 api migration in React Treemap component

17 Mar 202524 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

<EJ.TreeMap id="treemap" dataSource={[{State:"United States", GDP:17946, percentage:11.08, Rank:1}]} weightValuePath='GDP' leafItemSettings={leaf}></EJ.TreeMap>
var leaf={labelPath: 'State'} 		Property: dataSource

<TreeMapComponent id="treemap" dataSource={[{State:"United States", GDP:17946, percentage:11.08, Rank:1}]} weightValuePath='GDP' leafItemSettings={labelPath: 'State'}></TreeMapComponent>,

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

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

<EJ.TreeMap id="treemap" weightValuePath= "Population" ></EJ.TreeMap> 		Property: weightValuePath

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

<EJ.TreeMap id="treemap" colorValuePath= "Continent"></EJ.TreeMap> 		Property: rangeColorValuePath

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

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

<EJ.TreeMap id="treemap" height= 50 ></EJ.TreeMap> 		Property: height

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

<EJ.TreeMap id="treemap" width= 400></EJ.TreeMap> 		Property: width

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

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

<EJ.TreeMap id="treemap" locale= "en-US"></EJ.TreeMap> 		Property: locale

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

<EJ.TreeMap id="treemap" paletteColorMapping="paletteColorMapping"></EJ.TreeMap>
var paletteColorMapping={ colors: ['red','green'] } 		Property: palette

<TreeMapComponent palette={['#C33764', '#AB3566']} id="treemap" ></TreeMapComponent>
Margin Not Applicable Property: margin

<TreeMapComponent id="treemap" ></TreeMapComponent>
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 ={leafItem} showLabels={true}></EJ.TreeMap>
var leafItem={borderBrush: "blue" } 		Property: leafItemSettings.border

<TreeMapComponent id="treemap" leafItemSettings={ border: { color: 'white' } }></TreeMapComponent>
Border Width Property: leafItemSettings.borderThickness

<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap>
var leafItem={ borderThickness: 5} 		Property: leafItemSettings.border

<TreeMapComponent id="treemap" leafItemSettings={ border: { width: 5 } }></TreeMapComponent>
Gap Value Property: leafItemSettings.gap

<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap>
var leafItem={ gap: 5} 		Property: leafItemSettings.gap

<TreeMapComponent id="treemap" leafItemSettings={ gap: 5 }></TreeMapComponent>
Leaf Item Label Property: leafItemSettings.itemTemplate

<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap>
var leafItem={ itemTemplate: "template"} 		Property: leafItemSettings.labelTemplate

<TreeMapComponent id="treemap" leafItemSettings={ labelTemplate: 'template' }></TreeMapComponent>
Leaf Label Path Property: leafItemSettings.labelPath

<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap>
var leafItem={ labelPath: "GameName" } 		Property: leafItemSettings.labelPath

<TreeMapComponent id="treemap" leafItemSettings={ labelPath: 'GameName' }></TreeMapComponent>
Leaf Label Position Property: leafItemSettings.labelPosition

<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap>
var leafItem={ labelPosition: "topcenter"} 		Property: leafItemSettings.labelPosition

<TreeMapComponent id="treemap" leafItemSettings={ labelPosition: 'Center' }></TreeMapComponent>
Leaf Label Color Not Applicable Property: leafItemSettings.fill

<TreeMapComponent id="treemap" leafItemSettings={ fill: 'red'}></TreeMapComponent>
Random Colors Not Applicable Property: leafItemSettings.autoFill

<TreeMapComponent id="treemap" leafItemSettings={ autoFill: true }></TreeMapComponent>
Format Not Applicable Property: leafItemSettings.labelFormat

<TreeMapComponent id="treemap" leafItemSettings={ labelFormat: '${Continent}-${Population}' }></TreeMapComponent>
Labels Visibility Property: leafItemSettings.showLabels

<EJ.TreeMap id="treemap" showLabels={true}></EJ.TreeMap> 		Property: leafItemSettings.showLabels

<TreeMapComponent id="treemap" leafItemSettings={ showLabels: false }></TreeMapComponent>
Opacity Not Applicable Property: *leafItemSettings.opacity *

<TreeMapComponent id="treemap" leafItemSettings={ opacity: 0.7 }></TreeMapComponent>
Padding Not Applicable Property: *leafItemSettings.padding *

<TreeMapComponent id="treemap" leafItemSettings={ padding: 5}></TreeMapComponent>
Font Customization Not Applicable Property: leafItemSettings.labelStyle

<TreeMapComponent id="treemap" leafItemSettings={ labelStyle: { size: '12px', color: 'red', opacity: 0.5 } }></TreeMapComponent>
Position of Template Not Applicable Property: leafItemSettings.templatePosition

<TreeMapComponent id="treemap" leafItemSettings={ templatePosition: 'Center'}></TreeMapComponent>

Legend

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

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ alignment: "far" } 		Property: legendSettings.alignment

<TreeMapComponent id="treemap" legendSettings={alignment: 'Near' }></TreeMapComponent>
Legend Visibility Property: showLegend

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ showLegend: false } 		Property: legendSettings.visible

<TreeMapComponent id="treemap" legendSettings={visible: true }></TreeMapComponent>
Legend Position Property: legendSettings.dockPosition

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ dockPosition: "bottom" } 		Property: legendSettings.position

<TreeMapComponent id="treemap" legendSettings={ position: 'Top' }></TreeMapComponent>
Legend Height Property: legendSettings.height

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ height: 40} 		Property: legendSettings.height

<TreeMapComponent id="treemap" legendSettings={ height: '40px' }></TreeMapComponent>
Legend Width Property: legendSettings.width

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ width: 100} 		Property: legendSettings.width

<TreeMapComponent id="treemap" legendSettings={ width: '100px' }</TreeMapComponent>
Shape Height Property: legendSettings.iconHeight

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ iconHeight: 15 } 		Property: legendSettings.shapeHeight

<TreeMapComponent id="treemap" legendSettings={ shapeHeight: '40px' }></TreeMapComponent>
Shape Width Property: legendSettings.iconWidth

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={iconWidth: 8 } 		Property: legendSettings.shapeWidth

<TreeMapComponent id="treemap" legendSettings={shapeWidth: '40px' }></TreeMapComponent>
Padding Not Applicable Property: legendSettings.shapePadding

<TreeMapComponent id="treemap" legendSettings={ shapePadding: 10}></TreeMapComponent>
Legend Title Property: legendSettings.title

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ iconWidth: 8 } 		Property: legendSettings.title

<TreeMapComponent id="treemap" legendSettings={title: 'Legend' }></TreeMapComponent>
Legend Shape Not Applicable Property: legendSettings.shape

<TreeMapComponent id="treemap" legendSettings={shape: 'Rectangle' }></TreeMapComponent>
Legend Mode Property: legendSettings.mode

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ mode: "interactive"} 		Property: legendSettings.mode

<TreeMapComponent id="treemap" legendSettings={ mode: 'Interactive' }></TreeMapComponent>
Legend Text Customization Not Applicable Property: legendSettings.textStyle

<TreeMapComponent id="treemap" legendSettings={textStyle: { size: '10px', opacity: 0.5, color: 'red' } }></TreeMapComponent>
Legend Title Customization Not Applicable Property: legendSettings.titleStyle

<TreeMapComponent id="treemap" legendSettings={ titleStyle: { size: '10px', opacity: 0.5, color: 'red' } }></TreeMapComponent>
Legend Shape Border Not Applicable Property: legendSettings.shapeBorder

<TreeMapComponent id="treemap" legendSettings={shapeBorder: { width: 2, color: 'red' } }></TreeMapComponent>
Legend Template Property: legendSettings.template

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ template: "template" } 		Not Applicable
Left Label Property: legendSettings.leftLabel

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ mode: "interactive", leftLabel: "10Million" } 		Not Applicable
Right Label Property: legendSettings.rightLabel

<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap>
var legend={ mode: "interactive", rightLabel: "100Million"} 		Not Applicable
Legend Shape Image Not Applicable Property: legendSettings.imageUrl

<TreeMapComponent id="treemap" legendSettings={ imageUrl: "image.png" }></TreeMapComponent>
Position in Interactive Legend Not Applicable Property: legendSettings.labelPosition

<TreeMapComponent id="treemap" legendSettings={labelPosition: "Center" }></TreeMapComponent>
Legend Location Not Applicable Property: legendSettings.location

<TreeMapComponent id="treemap" legendSettings={ location: { x: 10, y: 20 } }></TreeMapComponent>
Legend Orientation Not Applicable Property: legendSettings.orientation

<TreeMapComponent id="treemap" legendSettings={orientation: "Horizontal" }></TreeMapComponent>

Levels

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

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective autoFill=true></LevelDirective></LevelsDirective></TreeMapComponent>
Level Background Color Property: levels.groupBackground

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[groupBackground: "white" ] 		Property: levels.fill

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective fill= 'white'></LevelDirective></LevelsDirective></TreeMapComponent>
Level Border Color Property: levels.groupBorderColor

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[groupBorderColor: "#58585B" ] 		Property: levels.border.color

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective border= { color: "#58585B" } ></LevelDirective></LevelsDirective></TreeMapComponent>
Level Border Width Property: levels.groupBorderThickness

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[groupBorderThickness: 2 ] 		Property: levels.border.width

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective border= { width: 2 }></LevelDirective></LevelsDirective></TreeMapComponent>
Group Gap Property: levels.groupGap

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[groupGap: 2 ] 		Property: levels.groupGap

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupGap= 2></LevelDirective></LevelsDirective></TreeMapComponent>
Group Padding Property: levels.groupPadding

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[groupPadding: 1 ] 		Property: levels.groupPadding

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupPadding={1} ></LevelDirective></LevelsDirective></TreeMapComponent>
Group Path Property: levels.groupPath

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[groupPath: "pathname" ] 		Property: levels.groupPath

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupPath= 'pathname'></LevelDirective></LevelsDirective></TreeMapComponent>
Height of Header Level Property: levels.headerHeight

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[ headerHeight: 20 ] 		Property: levels.headerHeight

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerHeight={20} ></LevelDirective></LevelsDirective></TreeMapComponent>
Header Template Property: levels.headerTemplate

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[ headerTemplate: "template" ] 		Property: levels.headerTemplate

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerTemplate= 'template' ></LevelDirective></LevelsDirective></TreeMapComponent>
Opacity of Color Not Applicable Property: levels.opacity

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective opacity={0.5}></LevelDirective></LevelsDirective></TreeMapComponent>
Header Visibility Property: levels.showHeader

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[showHeader: false ] 		Property: levels.showHeader

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective showHeader={false}></LevelDirective></LevelsDirective> </TreeMapComponent>
Template Position Property: levels.labelPosition

<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap>
var levels=[ labelPosition: "topleft" ] 		Property: levels.templatePosition

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective templatePosition= 'Center' ></LevelDirective></LevelsDirective></TreeMapComponent>
Header Style Not Applicable Property: levels.headerStyle

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerStyle= { color: 'red', size: '16px', opacity: 0.7 } ></LevelDirective></LevelsDirective></TreeMapComponent>
Header Format Not Applicable Property: levels.headerFormat

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerFormat= '${Continent}' ></LevelDirective></LevelsDirective></TreeMapComponent>
Header Alignment Not Applicable Property: levels.headerAlignment

<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerAlignment= 'Center' ></LevelDirective></LevelsDirective></TreeMapComponent>

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

<TreeMapComponent id="treemap" selectionSettings={ enable: true, mode: 'Item'}></TreeMapComponent>
<Inject services={[TreeMapSelection]}/>
Selection Color Not Applicable Property: selectionSettings.fill

<TreeMapComponent id="treemap" selectionSettings={ enable: true, fill: 'blue' }></TreeMapComponent>
<Inject services={[TreeMapSelection]}/>
Selection Color Opacity Not Applicable Property: selectionSettings.opacity

<TreeMapComponent id="treemap" selectionSettings={ enable: true, fill: 'blue', opacity: 0.6}></TreeMapComponent>
<Inject services={[TreeMapSelection]}/>
Border for selection Not Applicable Property: selectionSettings.border

<TreeMapComponent id="treemap" selectionSettings={ border: { color: 'red', width: 2 } }></TreeMapComponent>
<Inject services={[TreeMapSelection]}/>

Highlight

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

<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'All'}></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Selection Mode Property: highlightOnSelection

<EJ.TreeMap id="treemap" highlightOnSelection= {true}></EJ.TreeMap> 		Property: highlightSettings.mode

<TreeMapComponent id="treemap" highlightSettings={enable: true, mode: 'Item' }></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Group Border Color Property: highlightGroupBorderBrush

<EJ.TreeMap id="treemap" highlightGroupBorderBrush= 'gray'></EJ.TreeMap> 		Property: highlightSettings.border.color

<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'All',border: { color: 'gray' } }></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Group Border Width Property: highlightGroupBorderThickness

<EJ.TreeMap id="treemap" highlightGroupBorderThickness= {3} ></EJ.TreeMap> 		Property: highlightSettings.border.width

<TreeMapComponent id="treemap" highlightSettings={enable: true, mode: 'All', border: { width: 3 } }></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Selection Border Color Property: highlightBorderBrush

<EJ.TreeMap id="treemap" highlightBorderBrush= 'gray' ></EJ.TreeMap> 		Property: highlightSettings.border.color

<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'Item', border: { color: 'gray' }}></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Selection Border Width Property: highlightBorderThickness

<EJ.TreeMap id="treemap" highlightBorderThickness= {3}></EJ.TreeMap> 		Property: highlightSettings.border.width

<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'Item', border: { width: 3 } }></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Color Not Applicable Property: highlightSettings.fill

<TreeMapComponent id="treemap" highlightSettings={ enable: true, fill: 'red' }></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>
Highlight Color Opacity Not Applicable Property: highlightSettings.opacity

<TreeMapComponent id="treemap" highlightSettings={ enable: true, fill: 'red', opacity: 0.5 }></TreeMapComponent>
<Inject services={[TreeMapHighlight]}/>

Range ColorMapping

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

<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap>
var range=[{ from: 1000 } ] 		Property: leafItemSettings.colorMapping.from

<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ from: 1000 }] }></TreeMapComponent>
To value Property: rangeColorMapping.to

<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap>
var range=[{ to: 100000 } ] 		Property: leafItemSettings.colorMapping.to

<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ to: 100000 }] }></TreeMapComponent>
Color Property: rangeColorMapping.color

<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap>
var range=[{ color: "#77D8D8" } ] 		Property: leafItemSettings.colorMapping.color

<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ color: "#77D8D8" }] }></TreeMapComponent>
Legend Label Property: rangeColorMapping.legendLabel

<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap>
var range=[{ legendLabel: "Growth" } ] 		Property: leafItemSettings.colorMapping.label

<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ label: "Growth" }] }></TreeMapComponent>

Desaturation ColorMapping

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

<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap>
var desaturation=[{ from: 1000 } ] 		Property: leafItemSettings.colorMapping.from

<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ from: 1000 }] }></TreeMapComponent>
To value Property: desaturationColorMapping.to

<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap>
var desaturation=[{ to: 10000 } ] 		Property: leafItemSettings.colorMapping.to

<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ to: 10000 }]}></TreeMapComponent>
Color Property: desaturationColorMapping.color

<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap>
var desaturation=[{ color: "#77D8D8" } ] 		Property: leafItemSettings.colorMapping.color

<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ color: "#77D8D8" }] }></TreeMapComponent>
Value Not Applicable Property: leafItemSettings.colorMapping.value

<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ value: "Population" }]}></TreeMapComponent>
Minimum Opacity Not Applicable Property: leafItemSettings.colorMapping.minOpacity

<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ minOpacity: 0.7 }]}></TreeMapComponent>
Maximum Opacity Not Applicable Property: leafItemSettings.colorMapping.maxOpacity

<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ maxOpacity: 1 }] }></TreeMapComponent>

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

<TreeMapComponent id="treemap" tooltipSettings={ visible: true}></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Template Property: tooltipTemplate

<EJ.TreeMap id="treemap" showTooltip={true} tooltipTemplate='template' ></EJ.TreeMap> 		Property: tooltipSettings.template

<TreeMapComponent id="treemap" tooltipSettings={visible: true,template: 'template' }></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Border Not Applicable Property: tooltipSettings.border

<TreeMapComponent id="treemap" tooltipSettings={visible: true,border: { color: 'red', width: 2 } }></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Color Not Applicable Property: tooltipSettings.fill

<TreeMapComponent id="treemap" tooltipSettings={visible: true, fill: 'gray'}></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Format Not Applicable Property: tooltipSettings.format

<TreeMapComponent id="treemap" tooltipSettings={visible: true, format: '${Population}'}></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Marker Shape Not Applicable Property: tooltipSettings.markerShapes

<TreeMapComponent id="treemap" tooltipSettings={visible: true, markerShapes: 'Circle' }></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Color Opacity Not Applicable Property: tooltipSettings.opacity

<TreeMapComponent id="treemap" tooltipSettings={visible: true,opacity: 0.5 }></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>
Tooltip Text Style Not Applicable Property: tooltipSettings.textStyle

<TreeMapComponent id="treemap" tooltipSettings={visible: true,textStyle: { Color: 'red', opacity: 0.5, size: '12px' }}></TreeMapComponent>
<Inject services={[TreeMapTooltip, TreeMapLegend]}/>

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

<TreeMapComponent id="treemap" enableDrillDown= {true}></TreeMapComponent>
Drilldown Level Property: drillDownLevel

<EJ.TreeMap id="treemap" drillDownLevel= {1}></EJ.TreeMap> 		Property: InitialDrillSettings.groupIndex

<TreeMapComponent id="treemap" InitialDrillSettings= { groupIndex: 1 }></TreeMapComponent>

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

<TreeMapComponent id="treemap" load={this.load.bind(this)}></TreeMapComponent>
load(args){ }
Treemap Loaded Event Not Applicable Event: loaded

<TreeMapComponent id="treemap" loaded={this.loaded.bind(this)}></TreeMapComponent>
loaded(args){ }
Event Before Print Not Applicable Event: beforePrint

<TreeMapComponent id="treemap" beforePrint={this.beforePrint.bind(this)}></TreeMapComponent>
beforePrint(args){ }
Click Event Event: click

<EJ.TreeMap id="treemap" click = {click}></EJ.TreeMap>
function click(args){} 		Event: click

<TreeMapComponent id="treemap" click={this.click.bind(this)}></TreeMapComponent>
click(args){ }
Drill Start Event Event: drillStarted

<EJ.TreeMap id="treemap" drillStarted = {drillStarted}></EJ.TreeMap>
function drillStarted(args){} 		Event: drillStart

<TreeMapComponent id="treemap" drillStart={this. drillStart.bind(this)}></TreeMapComponent>
drillStart(args){ }
Drill End Event Not Applicable Event: drillEnd

<TreeMapComponent id="treemap" drillEnd={this.drillEnd.bind(this)}></TreeMapComponent>
drillEnd(args){ }
Event on Item Click Not Applicable Event: itemClick

<TreeMapComponent id="treemap" itemClick={this. itemClick.bind(this)}></TreeMapComponent>
itemClick(args){ }
Treemap Item Select Event Event: treeMapItemSelected

<EJ.TreeMap id="treemap" treeMapItemSelected = {TreeMapItemSelected}></EJ.TreeMap>
function treeMapItemSelected(args){} 		Event: itemSelected

<TreeMapComponent id="treemap" itemSelected={this. itemSelected.bind(this)}></TreeMapComponent>
itemSelected(args){ }
Treemap Item Rendering Event Event: itemRendering

<EJ.TreeMap id="treemap" itemRendering = { itemRendering}></EJ.TreeMap>
function itemRendering(args){} 		Event: itemRendering

<TreeMapComponent id="treemap" itemRendering={this. itemRendering.bind(this)}></TreeMapComponent>
itemRendering(args){ }
Treemap Item Move Event Not Applicable Event: itemMove

<TreeMapComponent id="treemap" itemMove={this.itemMove.bind(this)}></TreeMapComponent>
itemMove(args){ }
Treemap Item Highlight Event Not Applicable Event: itemHighlight

<TreeMapComponent id="treemap" itemHighlight={this.itemHighlight.bind(this)}></TreeMapComponent>
itemHighlight(args){ }
Template Header Render Event Event: headerTemplateRendering

<EJ.TreeMap id="treemap" headerTemplateRendering = {headerTemplateRendering}></EJ.TreeMap>
function headerTemplateRendering(args){} 		Not Applicable
Drilldown Item Select Event Event: drillDownItemSelected

<EJ.TreeMap id="treemap" drillDownItemSelected = {drillDownItemSelected}></EJ.TreeMap>
function drillDownItemSelected(args){} 		Not Applicable
Refresh Event Event: refreshed

<EJ.TreeMap id="treemap" refreshed = {refreshed}></EJ.TreeMap>
function refreshed(args){} 		Not Applicable
Group Select Event Event: treeMapGroupSelected

<EJ.TreeMap id="treemap" treeMapGroupSelected = { treeMapGroupSelected}></EJ.TreeMap>
function treeMapGroupSelected(args){} 		Not Applicable
Mouse Event Not Applicable Event: mouseMove

<TreeMapComponent id="treemap" mouseMove={this.mouseMove.bind(this)}></TreeMapComponent>
mouseMove(args){ }
Resize Event Not Applicable Event: resize

<TreeMapComponent id="treemap" resize={this.resize.bind(this)}></TreeMapComponent>
resize(args){ }
Tooltip Render Event Not Applicable Event: tooltipRendering

<TreeMapComponent id="treemap" tooltipRendering={this.tooltipRendering.bind(this)}></TreeMapComponent>
tooltipRendering(args){ }
Double Click Event Event: doubleClick

<EJ.TreeMap id="treemap" doubleClick = {doubleClick}></EJ.TreeMap>
function doubleClick(args){} 		Not Applicable
Right Click Event Event: rightClick

<EJ.TreeMap id="treemap" rightClick = {rightClick}></EJ.TreeMap>
function rightClick(args){} 		Not Applicable