JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript (ES5) TreeMap control

08 May 2023 / 19 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

var populationdata = [{
  Continent: “Asia”,
  Population: 1749046000 }],
$(“#container”).ejTreeMap({
dataSource: populationdata })		 Property: dataSource

var populationdata = [{ Continent: “Asia”,
  Population: 1749046000 }],
var treemap = new ej.treemap.TreeMap({
  dataSource: populationdata
});
treemap.appendTo(‘#container’);

Appearance

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

$(“#container”).ejTreeMap({
itemsLayoutMode: “sliceanddiceauto” })		 Property: layoutType

var treemap = new ej.treemap.TreeMap({
  layoutType: ‘SliceAndDiceAuto’
});
treemap.appendTo(‘#container’);
Weight Value Path Property: weightValuePath

$(“#container”).ejTreeMap({
weightValuePath: “Population” })		 Property: weightValuePath

var treemap = new ej.treemap.TreeMap({
  weightValuePath: ‘Population’
});
treemap.appendTo(‘#container’);
Range Color Value Path Property: colorValuePath

$(“#container”).ejTreeMap({
colorValuePath: “Continent” })		 Property: rangeColorValuePath

var treemap = new ej.treemap.TreeMap({
  rangeColorValuePath: ‘Continent’
});
treemap.appendTo(‘#container’);
Equal Color Value Path Not Applicable Property: equalColorValuePath

var treemap = new ej.treemap.TreeMap({
  equalColorValuePath: ‘Asia’
});
treemap.appendTo(‘#container’);
Height Property: height

$(“#container”).ejTreeMap({
height: 50 })		 Property: height

var treemap = new ej.treemap.TreeMap({
  height: ‘50px’
});
treemap.appendTo(‘#container’);
Width Property: width

$(“#container”).ejTreeMap({
width: 400 })		 Property: width

var treemap = new ej.treemap.TreeMap({
  width: ‘400px’
});
treemap.appendTo(‘#container’);
Theme Not Applicable Property: theme

var treemap = new ej.treemap.TreeMap({
  theme: ‘Highcontrast’
});
treemap.appendTo(‘#container’);
Localization Property: locale

$(“#container”).ejTreeMap({
locale: “en-US” })		 Property: locale

var treemap = new ej.treemap.TreeMap({
  locale: ‘en-US’
});
treemap.appendTo(‘#container’);
Palette Colors Property: paletteColorMapping.colors

$(“#container”).ejTreeMap({
paletteColorMapping: { colors: [‘red’,‘green’] } })		 Property: palette

var treemap = new ej.treemap.TreeMap({
  palette: [‘#C33764’, ‘#AB3566’]
});
treemap.appendTo(‘#container’);
Margin Not Applicable Property: margin

var treemap = new ej.treemap.TreeMap({
  margin: { left: 5, top: 8 }
});
treemap.appendTo(‘#container’);
Resize Property: enableResize

$(“#container”).ejTreeMap({
enableResize: true })		 Not Applicable
Responsive Property: isResponsive

$(“#container”).ejTreeMap({
isResponsive: true })		 Not Applicable

Leaf Items

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

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true,
  borderBrush: “blue” }
})		 Property: leafItemSettings.border

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { border: { color: ‘white’ } }
});
treemap.appendTo(‘#container’);
Border Width Property: leafItemSettings.borderThickness

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true,
  borderThickness: 5 }
})		 Property: leafItemSettings.border

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { border: { width: 5 } }
});
treemap.appendTo(‘#container’);
Gap Value Property: leafItemSettings.gap

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true,
  gap: 5 }
})		 Property: leafItemSettings.gap

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { gap: 5 }
});
treemap.appendTo(‘#container’);
Leaf Item Label Property: leafItemSettings.itemTemplate

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true,
  itemTemplate: “template” }
})		 Property: leafItemSettings.labelTemplate

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { labelTemplate: ‘template’ }
});
treemap.appendTo(‘#container’);
Leaf Label Path Property: leafItemSettings.labelPath

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true,
  labelPath: “GameName” }
})		 Property: leafItemSettings.labelPath

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { labelPath: ‘GameName’ }
});
treemap.appendTo(‘#container’);
Leaf Label Position Property: leafItemSettings.labelPosition

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true,
  labelPosition: “topcenter” }
})		 Property: leafItemSettings.labelPosition

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { labelPosition: ‘Center’ }
});
treemap.appendTo(‘#container’);
Leaf Label Color Not Applicable Property: leafItemSettings.fill

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { fill: ‘red’ }
});
treemap.appendTo(‘#container’);
Random Colors Not Applicable Property: leafItemSettings.autoFill

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { autoFill: true }
});
treemap.appendTo(‘#container’);
Format Not Applicable Property: leafItemSettings.labelFormat

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { labelFormat: ’${Continent}-${Population}’ }
});
treemap.appendTo(‘#container’);
Labels Visibility Property: leafItemSettings.showLabels

$(“#container”).ejTreeMap({
  leafItemSettings: { showLabels: true }
})		 Property: leafItemSettings.showLabels

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { showLabels: false }
});
treemap.appendTo(‘#container’);
Opacity Not Applicable Property: *leafItemSettings.opacity *

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { opacity: 0.7 }
});
treemap.appendTo(‘#container’);
Padding Not Applicable Property: *leafItemSettings.padding *

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { padding: 5 }
});
treemap.appendTo(‘#container’);
Font Customization Not Applicable Property: leafItemSettings.labelStyle

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { labelStyle: { size: ‘12px’, color: ‘red’, opacity: 0.5 } }
});
treemap.appendTo(‘#container’);
Position of Template Not Applicable Property: leafItemSettings.templatePosition

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { templatePosition: ‘Center’ }
});
treemap.appendTo(‘#container’);

Legend

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

$(“#container”).ejTreeMap({
  legendSettings: { alignment: “far” }
})		 Property: legendSettings.alignment

var treemap = new ej.treemap.TreeMap({
  legendSettings: { alignment: ‘Near’ }
});
treemap.appendTo(‘#container’);
Legend Visibility Property: showLegend

$(“#container”).ejTreeMap({
  showLegend: false
})		 Property: legendSettings.visible

var treemap = new ej.treemap.TreeMap({
  legendSettings: { visible: true }
});
treemap.appendTo(‘#container’);
Legend Position Property: legendSettings.dockPosition

$(“#container”).ejTreeMap({
  legendSettings: { dockPosition: “bottom” }
})		 Property: legendSettings.position

var treemap = new ej.treemap.TreeMap({
  legendSettings: { position: ‘Top’ }
});
treemap.appendTo(‘#container’);
Legend Height Property: legendSettings.height

$(“#container”).ejTreeMap({
  legendSettings: { height: 40 }
})		 Property: legendSettings.height

var treemap = new ej.treemap.TreeMap({
  legendSettings: { height: ‘40px’ }
});
treemap.appendTo(‘#container’);
Legend Width Property: legendSettings.width

$(“#container”).ejTreeMap({
  legendSettings: { width: 100 }
})		 Property: legendSettings.width

var treemap = new ej.treemap.TreeMap({
  legendSettings: { width: ‘100px’ }
});
treemap.appendTo(‘#container’);
Shape Height Property: legendSettings.iconHeight

$(“#container”).ejTreeMap({
  legendSettings: { iconHeight: 15 }
})		 Property: legendSettings.shapeHeight

var treemap = new ej.treemap.TreeMap({
  legendSettings: { shapeHeight: ‘40px’ }
});
treemap.appendTo(‘#container’);
Shape Width Property: legendSettings.iconWidth

$(“#container”).ejTreeMap({
  legendSettings: { iconWidth: 8 }
})		 Property: legendSettings.shapeWidth

var treemap = new ej.treemap.TreeMap({
  legendSettings: { shapeWidth: ‘40px’ }
});
treemap.appendTo(‘#container’);
Padding Not Applicable Property: legendSettings.shapePadding

var treemap = new ej.treemap.TreeMap({
  legendSettings: { shapePadding: 10 }
});
treemap.appendTo(‘#container’);
Legend Title Property: legendSettings.title

$(“#container”).ejTreeMap({
  legendSettings: { title: “Population” }
})		 Property: legendSettings.title

var treemap = new ej.treemap.TreeMap({
  legendSettings: { title: ‘Legend’ }
});
treemap.appendTo(‘#container’);
Legend Shape Not Applicable Property: legendSettings.shape

var treemap = new ej.treemap.TreeMap({
  legendSettings: { shape: ‘Rectangle’ }
});
treemap.appendTo(‘#container’);
Legend Mode Property: legendSettings.mode

$(“#container”).ejTreeMap({
  legendSettings: { mode: “interactive” }
})		 Property: legendSettings.mode

var treemap = new ej.treemap.TreeMap({
  legendSettings: { mode: ‘Interactive’ }
});
treemap.appendTo(‘#container’);
Legend Text Customization Not Applicable Property: legendSettings.textStyle

var treemap = new ej.treemap.TreeMap({
  legendSettings: { textStyle: {
    size: ‘10px’, opacity: 0.5, color: ‘red’ } }
});
treemap.appendTo(‘#container’);
Legend Title Customization Not Applicable Property: legendSettings.titleStyle

var treemap = new ej.treemap.TreeMap({
  legendSettings: { titleStyle: {
    size: ‘10px’, opacity: 0.5, color: ‘red’ } }
});
treemap.appendTo(‘#container’);
Legend Shape Border Not Applicable Property: legendSettings.shapeBorder

var treemap = new ej.treemap.TreeMap({
  legendSettings: { shapeBorder: {
    width: 2, color: ‘red’ } }
});
treemap.appendTo(‘#container’);
Legend Template Property: legendSettings.template

$(“#container”).ejTreeMap({
  legendSettings: { template: “template” }
})		 Not Applicable
Left Label Property: legendSettings.leftLabel

$(“#container”).ejTreeMap({
  legendSettings: { mode: “interactive”, leftLabel: “10Million” }
})		 Not Applicable
Right Label Property: legendSettings.rightLabel

$(“#container”).ejTreeMap({
  legendSettings: { mode: “interactive”, rightLabel: “100Million” }
})		 Not Applicable
Legend Shape Image Not Applicable Property: legendSettings.imageUrl

var treemap = new ej.treemap.TreeMap({
  legendSettings: { imageUrl: “image.png” }
});
treemap.appendTo(‘#container’);
Position in Intractive Legend Not Applicable Property: legendSettings.labelPosition

var treemap = new ej.treemap.TreeMap({
  legendSettings: { labelPosition: “Center” }
});
treemap.appendTo(‘#container’);
Legend Location Not Applicable Property: legendSettings.location

var treemap = new ej.treemap.TreeMap({
  legendSettings: { location: { x: 10, y: 20 } }
});
treemap.appendTo(‘#container’);
Legend Orientation Not Applicable Property: legendSettings.orientation

var treemap = new ej.treemap.TreeMap({
  legendSettings: { orientation: “Horizontal” }
});
treemap.appendTo(‘#container’);

Levels

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

var treemap = new ej.treemap.TreeMap({
  levels: [{ autoFill: true }]
});
treemap.appendTo(‘#container’);
Level Background Color Property: levels.groupBackground

$(“#container”).ejTreeMap({
  levels: [{ groupBackground: “white” }]
})		 Property: levels.fill

var treemap = new ej.treemap.TreeMap({
  levels: [{ fill: ‘white’ }]
});
treemap.appendTo(‘#container’);
Level Border Color Property: levels.groupBorderColor

$(“#container”).ejTreeMap({
  levels: [{ groupBorderColor: “#58585B” }]
})		 Property: levels.border.color

var treemap = new ej.treemap.TreeMap({
  levels: [{ border: { color: “#58585B” } }]
});
treemap.appendTo(‘#container’);
Level Border Width Property: levels.groupBorderThickness

$(“#container”).ejTreeMap({
  levels: [{ groupBorderThickness: 2 }]
})		 Property: levels.border.width

var treemap = new ej.treemap.TreeMap({
  levels: [{ border: { width: 2 } }]
});
treemap.appendTo(‘#container’);
Group Gap Property: levels.groupGap

$(“#container”).ejTreeMap({
  levels: [{ groupGap: 2 }]
})		 Property: levels.groupGap

var treemap = new ej.treemap.TreeMap({
  levels: [{ groupGap: 2 }]
});
treemap.appendTo(‘#container’);
Group Padding Property: levels.groupPadding

$(“#container”).ejTreeMap({
  levels: [{ groupPadding: 1 }]
})		 Property: levels.groupPadding

var treemap = new ej.treemap.TreeMap({
  levels: [{ groupPadding: 1 }]
});
treemap.appendTo(‘#container’);
Group Path Property: levels.groupPath

$(“#container”).ejTreeMap({
  levels: [{ groupPath: “pathname” }]
})		 Property: levels.groupPath

var treemap = new ej.treemap.TreeMap({
  levels: [{ groupPath: ‘pathname’ }]
});
treemap.appendTo(‘#container’);
Height of Header Level Property: levels.headerHeight

$(“#container”).ejTreeMap({
  levels: [{ headerHeight: 20 }]
})		 Property: levels.headerHeight

var treemap = new ej.treemap.TreeMap({
  levels: [{ headerHeight: 20 }]
});
treemap.appendTo(‘#container’);
Header Template Property: levels.headerTemplate

$(“#container”).ejTreeMap({
  levels: [{ headerTemplate: “template” }]
})		 Property: levels.headerTemplate

var treemap = new ej.treemap.TreeMap({
  levels: [{ headerTemplate: ‘template’ }]
});
treemap.appendTo(‘#container’);
Opacity of Color Not Applicable Property: levels.opacity

var treemap = new ej.treemap.TreeMap({
  levels: [{ opacity: 0.5 }]
});
treemap.appendTo(‘#container’);
Header Visibility Property: levels.showHeader

$(“#container”).ejTreeMap({
  levels: [{ showHeader: false }]
})		 Property: levels.showHeader

var treemap = new ej.treemap.TreeMap({
  levels: [{ showHeader: false }]
});
treemap.appendTo(‘#container’);
Template Position Property: levels.labelPosition

$(“#container”).ejTreeMap({
  levels: [{ labelPosition: “topleft” }]
})		 Property: levels.templatePosition

var treemap = new ej.treemap.TreeMap({
  levels: [{ templatePosition: ‘Center’ }]
});
treemap.appendTo(‘#container’);
Header Style Not Applicable Property: levels.headerStyle

var treemap = new ej.treemap.TreeMap({
  levels: [{ headerStyle: { color: ‘red’, size: ‘16px’, opacity: 0.7 } }]
});
treemap.appendTo(‘#container’);
Header Format Not Applicable Property: levels.headerFormat

var treemap = new ej.treemap.TreeMap({
  levels: [{ headerFormat: ’${Continent}’ }]
});
treemap.appendTo(‘#container’);
Header Alignment Not Applicable Property: levels.headerAlignment

var treemap = new ej.treemap.TreeMap({
  levels: [{ headerAlignment: ‘Center’ }]
});
treemap.appendTo(‘#container’);

Selection

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

$(“#container”).ejTreeMap({
  selectionMode: “default”
})		 Property: selectionSettings.mode

var treemap = new ej.treemap.TreeMap({
  selectionSettings: { enable: true, mode: ‘Item’ }
});
treemap.appendTo(‘#container’);
Selection Color Not Applicable Property: selectionSettings.fill

var treemap = new ej.treemap.TreeMap({
  selectionSettings: { enable: true, fill: ‘blue’ }
});
treemap.appendTo(‘#container’);
Selection Color Opacity Not Applicable Property: selectionSettings.opacity

var treemap = new ej.treemap.TreeMap({
  selectionSettings: { enable: true, fill: ‘blue’, opacity: 0.6 }
});
treemap.appendTo(‘#container’);
Border for selection Not Applicable Property: selectionSettings.border

var treemap = new ej.treemap.TreeMap({
  selectionSettings: { border: { color: ‘red’, width: 2 } }
});
treemap.appendTo(‘#container’);

Hightlight

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

$(“#container”).ejTreeMap({
  highlightGroupOnSelection: true
})		 Property: highlightSettings.mode

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, mode: ‘All’ }
});
treemap.appendTo(‘#container’);
Highlight Selection Mode Property: highlightOnSelection

$(“#container”).ejTreeMap({
  highlightOnSelection: true
})		 Property: highlightSettings.mode

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, mode: ‘Item’ }
});
treemap.appendTo(‘#container’);
Highlight Group Border Color Property: highlightGroupBorderBrush

$(“#container”).ejTreeMap({
  highlightGroupBorderBrush: ‘gray’
})		 Property: highlightSettings.border.color

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, mode: ‘All’,
    border: { color: ‘gray’ } }
});
treemap.appendTo(‘#container’);
Highlight Group Border Width Property: highlightGroupBorderThickness

$(“#container”).ejTreeMap({
  highlightGroupBorderThickness: 3
})		 Property: highlightSettings.border.width

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, mode: ‘All’,
    border: { width: 3 } }
});
treemap.appendTo(‘#container’);
Highlight Selection Border Color Property: highlightBorderBrush

$(“#container”).ejTreeMap({
  highlightBorderBrush: ‘gray’
})		 Property: highlightSettings.border.color

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, mode: ‘Item’,
    border: { color: ‘gray’ } }
});
treemap.appendTo(‘#container’);
Highlight Selection Border Width Property: highlightBorderThickness

$(“#container”).ejTreeMap({
  highlightBorderThickness: 3
})		 Property: highlightSettings.border.width

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, mode: ‘Item’,
    border: { width: 3 } }
});
treemap.appendTo(‘#container’);
Highlight Color Not Applicable Property: highlightSettings.fill

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, fill: ‘red’ }
});
treemap.appendTo(‘#container’);
Highlight Color Opacity Not Applicable Property: highlightSettings.opacity

var treemap = new ej.treemap.TreeMap({
  highlightSettings: { enable: true, fill: ‘red’, opacity: 0.5 }
});
treemap.appendTo(‘#container’);

Range ColorMapping

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

$(“#container”).ejTreeMap({
  rangeColorMapping: [{ from: 1000 }]
})		 Property: leafItemSettings.colorMapping.from

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ from: 1000 }] }
});
treemap.appendTo(‘#container’);
To value Property: rangeColorMapping.to

$(“#container”).ejTreeMap({
  rangeColorMapping: [{ to: 100000 }]
})		 Property: leafItemSettings.colorMapping.to

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ to: 100000 }] }
});
treemap.appendTo(‘#container’);
Color Property: rangeColorMapping.color

$(“#container”).ejTreeMap({
  rangeColorMapping: [{ color: “#77D8D8” }]
})		 Property: leafItemSettings.colorMapping.color

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ color: “#77D8D8” }] }
});
treemap.appendTo(‘#container’);
Legend Label Property: rangeColorMapping.legendLabel

$(“#container”).ejTreeMap({
  rangeColorMapping: [{ legendLabel: “Growth” }]
})		 Property: leafItemSettings.colorMapping.label

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ label: “Growth” }] }
});
treemap.appendTo(‘#container’);

Desaturation ColorMapping

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

$(“#container”).ejTreeMap({
  desaturationColorMapping: [{ from: 1000 }]
})		 Property: leafItemSettings.colorMapping.from

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ from: 1000 }] }
});
treemap.appendTo(‘#container’);
To value Property: desaturationColorMapping.to

$(“#container”).ejTreeMap({
  desaturationColorMapping: [{ to: 10000 }]
})		 Property: leafItemSettings.colorMapping.to

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ to: 10000 }] }
});
treemap.appendTo(‘#container’);
Color Property: desaturationColorMapping.color

$(“#container”).ejTreeMap({
  desaturationColorMapping: [{ color: “#77D8D8” }]
})		 Property: leafItemSettings.colorMapping.color

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ color: “#77D8D8” }] }
});
treemap.appendTo(‘#container’);
Value Not Applicable Property: leafItemSettings.colorMapping.value

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ value: “Population” }] }
});
treemap.appendTo(‘#container’);
Minimum Opacity Not Applicable Property: leafItemSettings.colorMapping.minOpacity

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ minOpacity: 0.7 }] }
});
treemap.appendTo(‘#container’);
Maximum Opacity Not Applicable Property: leafItemSettings.colorMapping.maxOpacity

var treemap = new ej.treemap.TreeMap({
  leafItemSettings: { colorMapping: [{ maxOpacity: 1 }] }
});
treemap.appendTo(‘#container’);

Tooltip

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

$(“#container”).ejTreeMap({
  showTooltip: true
})		 Property: tooltipSettings.visible

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { visible: true }
});
treemap.appendTo(‘#container’);
Tooltip Template Property: tooltipTemplate

$(“#container”).ejTreeMap({
  tooltipTemplate: ‘template’
})		 Property: tooltipSettings.template

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { template: ‘template’ }
});
treemap.appendTo(‘#container’);
Tooltip Border Not Applicable Property: tooltipSettings.border

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { border: { color: ‘red’, width: 2 } }
});
treemap.appendTo(‘#container’);
Tooltip Color Not Applicable Property: tooltipSettings.fill

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { fill: ‘gray’ }
});
treemap.appendTo(‘#container’);
Tooltip Format Not Applicable Property: tooltipSettings.format

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { format: ’${Population}’ }
});
treemap.appendTo(‘#container’);
Tooltip Marker Shape Not Applicable Property: tooltipSettings.markerShapes

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { markerShapes: ‘Circle’ }
});
treemap.appendTo(‘#container’);
Tooltip Color Opacity Not Applicable Property: tooltipSettings.opacity

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { opacity: 0.5 }
});
treemap.appendTo(‘#container’);
Tooltip Text Style Not Applicable Property: tooltipSettings.textStyle

var treemap = new ej.treemap.TreeMap({
  tooltipSettings: { textStyle: {
    Color: ‘red’, opacity: 0.5, size: ‘12px’ } }
});
treemap.appendTo(‘#container’);

Drilldown

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

$(“#container”).ejTreeMap({
  enableDrillDown: true
})		 Property: enableDrillDown

var treemap = new ej.treemap.TreeMap({
  enableDrillDown: true
});
treemap.appendTo(‘#container’);
Drilldown Level Property: drillDownLevel

$(“#container”).ejTreeMap({
  drillDownLevel: 1
})		 Property: InitialDrillSettings.groupIndex

var treemap = new ej.treemap.TreeMap({
  InitialDrillSettings: { groupIndex: 1 }
});
treemap.appendTo(‘#container’);

Methods

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

$(“#container”).ejTreeMap({ “refresh” })		 Method: refresh

var treemap = new ej.treemap.TreeMap({
  treemap.refresh(); });
treemap.appendTo(‘#container’);
Method to Drilldown Method: drillDown

$(“#container”).ejTreeMap({ “drillDown” })		 Not Applicable
Append to Method Not Applicable Method: appendTo

var treemap = new ej.treemap.TreeMap({
});
treemap.appendTo(‘#container’);
Add Event Listener Method Not Applicable Method: addEventListener

var treemap = new ej.treemap.TreeMap({
  treemap.addEventListener();
});
treemap.appendTo(‘#container’);
Treemap Destroy Method Not Applicable Method: destroy

var treemap = new ej.treemap.TreeMap({
  treemap.destroy();
});
treemap.appendTo(‘#container’);
Treemap Exporting Method Not Applicable Method: export

var treemap = new ej.treemap.TreeMap({
  treemap.export(‘png’,‘treemap’);
});
treemap.appendTo(‘#container’);
Get the Module Name Not Applicable Method: getModuleName

var treemap = new ej.treemap.TreeMap({
  this.getModuleName();
});
treemap.appendTo(‘#container’);
Printing the Treemap Not Applicable Method: print

var treemap = new ej.treemap.TreeMap({
  treemap.print();
});
treemap.appendTo(‘#container’);
Resizing the Treemap Not Applicable Method: resizeOnTreeMap

var treemap = new ej.treemap.TreeMap({
  treemap.resizeOnTreeMap();
});
treemap.appendTo(‘#container’);
Inject Method (Tooltip) Not Applicable Method: resizeOnTreeMap

TreeMap.Inject(TreeMapTooltip);
var treemap = new ej.treemap.TreeMap({ });
treemap.appendTo(‘#container’);
Remove Event Listener Method Not Applicable Method: removeEventListener

var treemap = new ej.treemap.TreeMap({
  treemap.removeEventListener();
});
treemap.appendTo(‘#container’);

Events

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

var treemap = new ej.treemap.TreeMap({
  load: function(e: ILoadEventArgs): void { }
});
treemap.appendTo(‘#container’);
Treemap Loaded Event Not Applicable Event: loaded

var treemap = new ej.treemap.TreeMap({
  loaded: function(e: ILoadedEventArgs): void { }
});
treemap.appendTo(‘#container’);
Event Before Print Not Applicable Event: beforePrint

var treemap = new ej.treemap.TreeMap({
  beforePrint: function(e: IPrintEventArgs): void { }
});
treemap.appendTo(‘#container’);
Click Event Event: click

$(“#container”).ejTreeMap({
  click: function (args) { }
})		 Event: click

var treemap = new ej.treemap.TreeMap({
  click: function(e: IItemClickEventArgs): void { }
});
treemap.appendTo(‘#container’);
Drill Start Event Event: drillStarted

$(“#container”).ejTreeMap({
  drillStarted: function (args) { }
})		 Event: drillStart

var treemap = new ej.treemap.TreeMap({
  drillStart: function(e: IDrillStartEventArgs): void { }
});
treemap.appendTo(‘#container’);
Drill End Event Not Applicable Event: drillEnd

var treemap = new ej.treemap.TreeMap({
  drillEnd: function(e: IDrillEndEventArgs): void { }
});
treemap.appendTo(‘#container’);
Event on Item Click Not Applicable Event: itemClick

var treemap = new ej.treemap.TreeMap({
  itemClick: function(e: IItemClickEventArgs): void { }
});
treemap.appendTo(‘#container’);
Treemap Item Select Event Event: treeMapItemSelected

$(“#container”).ejTreeMap({
  treeMapItemSelected: function (args) { }
})		 Event: itemSelected

var treemap = new ej.treemap.TreeMap({
  itemSelected: function(e: IItemSelectedEventArgs): void { }
});
treemap.appendTo(‘#container’);
Treemap Item Rendering Event Event: itemRendering

$(“#container”).ejTreeMap({
  itemRendering: function (args) { }
})		 Event: itemRendering

var treemap = new ej.treemap.TreeMap({
  itemRendering: function(e: IItemRenderingEventArgs): void { }
});
treemap.appendTo(‘#container’);
Treemap Item Move Event Not Applicable Event: itemMove

var treemap = new ej.treemap.TreeMap({
  itemMove: function(e: IItemMoveEventArgs): void { }
});
treemap.appendTo(‘#container’);
Treemap Item Highlight Event Not Applicable Event: itemHighlight

var treemap = new ej.treemap.TreeMap({
  itemHighlight: function(e: IItemHighlightEventArgs): void { }
});
treemap.appendTo(‘#container’);
Template Header Render Event Event: headerTemplateRendering

$(“#container”).ejTreeMap({
  headerTemplateRendering: function (args) { }
})		 Not Applicable
Drilldown Item Select Event Event: drillDownItemSelected

$(“#container”).ejTreeMap({
  drillDownItemSelected: function (args) { }
})		 Not Applicable
Refresh Event Event: refreshed

$(“#container”).ejTreeMap({
  refreshed: function (args) { }
})		 Not Applicable
Group Select Event Event: treeMapGroupSelected

$(“#container”).ejTreeMap({
  treeMapGroupSelected: function (args) { }
})		 Not Applicable
Mouse Event Not Applicable Event: mouseMove

var treemap = new ej.treemap.TreeMap({
  mouseMove: function(e: IMouseMoveEventArgs): void { }
});
treemap.appendTo(‘#container’);
Resize Event Not Applicable Event: resize

var treemap = new ej.treemap.TreeMap({
  resize: function(e: IResizeEventArgs): void { }
});
treemap.appendTo(‘#container’);
Tooltip Render Event Not Applicable Event: tooltipRendering

var treemap = new ej.treemap.TreeMap({
  tooltipRendering: function(e: ITreeMapTooltipRenderEventArgs): void { }
});
treemap.appendTo(‘#container’);
Double Click Event Event: doubleClick

$(“#container”).ejTreeMap({
  doubleClick: function (args) { }
})		 Not Applicable
Right Click Event Event: rightClick

$(“#container”).ejTreeMap({
  rightClick: function (args) { }
})		 Not Applicable
Previous
Next