ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in ASP.NET Core TreeMap control

19 Oct 2021 / 16 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

public IActionResult TreeMap() {
  ViewBag.datasource = [{
    Continent: "Asia", Population: 1749046000
 }];
}
<ej-tree-map id="treemap"
  datasource="ViewBag.datasource">
</ej-tree-map>		 Property: dataSource

public IActionResult TreeMap() {
  ViewBag.datasource = [{
    Continent: "Asia", Population: 1749046000
 }];
}
<ejs-treemap id="treemap"
  dataSource="ViewBag.dataSource">
</ejs-treemap>

Appearance

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

<ej-tree-map id="treemap"
  items-layout-mode="SliceAndDiceAuto">
</ej-tree-map>		 Property: layoutType

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

<ej-tree-map id="treemap"
  weight-value-path="Population">
</ej-tree-map>		 Property: weightValuePath

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

<ej-tree-map id="treemap"
  color-value-path="Continent">
</ej-tree-map>		 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-tree-map id="treemap"
  height="50px">
</ej-tree-map>		 Property: height

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

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

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

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

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

TreeMapPaletteColorMapping palette =
  new TreeMapPaletteColorMapping();
palette.Colors.Add("green");
palette.Colors.Add("red");
<ej-tree-map id="treemap"
  tree-map-palette-color-mapping="palette">
</ej-tree-map>		 Property: palette

var color = ['#C33764', '#AB3566'];
<ejs-treemap id="treemap"
  palette="color">
</ejs-treemap>
Margin Not Applicable Property: margin

var margin = new TreeMapMargin {
  Left = 5, Top = 8
};
<ejs-treemap id="treemap"
  margin="margin">
</ejs-treemap>
Resize Property: enableResize

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

<ej-treemap id="treemap"
  is-responsive="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">
<e-leaf-item-settings
  border-brush="blue"/>
</ej-treemap>		 Property: leafItemSettings.border

var border = new TreeMapBorder{ Color = "blue"};
<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  border="border"/>
</ejs-treemap>
Border Width Property: leafItemSettings.borderThickness

<ej-treemap id="treemap">
<e-leaf-item-settings
  border-thickness="5"/>
</ej-treemap>		 Property: leafItemSettings.border

var border = new TreeMapBorder{ width = 5};
<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  border="border"/>
</ejs-treemap>
Gap Value Not Applicable Property: leafItemSettings.gap

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  gap="5"/>
</ejs-treemap>
Leaf Item Label Property: leafItemSettings.itemTemplate

<ej-treemap id="treemap">
<e-leaf-item-settings
  show-labels="true"
  item-template="template"/>
</ej-treemap>		 Property: leafItemSettings.labelTemplate

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  labelTemplate="template"/>
</ejs-treemap>
Leaf Label Path Property: leafItemSettings.labelPath

<ej-treemap id="treemap">
<e-leaf-item-settings
  show-labels="true"
  label-path="GaugeName"/>
</ej-treemap>		 Property: leafItemSettings.labelPath

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  labelPath="GaugeName"/>
</ejs-treemap>
Leaf Label Position Property: leafItemSettings.labelPosition

<ej-treemap id="treemap">
<e-leaf-item-settings
  show-labels="true"
  label-position="TopCenter"/>
</ej-treemap>		 Property: leafItemSettings.labelPosition

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  labelPosition="Center"/>
</ejs-treemap>
Leaf Label Color Not Applicable Property: leafItemSettings.fill

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  fill="red"/>
</ejs-treemap>
Random Colors Not Applicable Property: leafItemSettings.autoFill

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  autoFill="true"/>
</ejs-treemap>
Format Not Applicable Property: leafItemSettings.labelFormat

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

<ej-treemap id="treemap">
<e-leaf-item-settings
  show-labels="true"/>
</ej-treemap>		 Property: leafItemSettings.showLabels

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  showLabels="true"/>
</ejs-treemap>
Opacity Not Applicable Property: leafItemSettings.opacity

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  opacity="0.7"/>
</ejs-treemap>
Padding Not Applicable Property: leafItemSettings.padding

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  padding="5"/>
</ejs-treemap>
Font Customization Not Applicable Property: leafItemSettings.labelStyle

var label = new
  LeafItemSettingsLabelStyleLeafItemSettings {
  Size = '12px', Color = "red", Opacity = 0.5 };
<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  labelStyle="label"/>
</ejs-treemap>
Position of Template Not Applicable Property: leafItemSettings.templatePosition

<ejs-treemap id="treemap">
<e-treemap-leafitemsettings
  templatePosition="Center"/>
</ejs-treemap>

Legend

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

<ej-treemap id="treemap">
<e-legend-settings
  alignment="Far"/>
</ej-treemap>		 Property: legendSettings.alignment

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  alignment="Near"/>
</ejs-treemap>
Legend Visibility Property: showLegend

<ej-treemap id="treemap" show-legend="true">
</ej-treemap>		 Property: legendSettings.visible

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  visible="true"/>
</ejs-treemap>
Legend Position Property: legendSettings.dockPosition

<ej-treemap id="treemap">
<e-legend-settings
  dock-position="Bottom"/>
</ej-treemap>		 Property: legendSettings.position

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  position="Top"/>
</ejs-treemap>
Legend Height Property: legendSettings.height

<ej-treemap id="treemap">
<e-legend-settings
  height="40"/>
</ej-treemap>		 Property: legendSettings.height

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  height="40px"/>
</ejs-treemap>
Legend Width Property: legendSettings.width

<ej-treemap id="treemap">
<e-legend-settings
  width="100"/>
</ej-treemap>		 Property: legendSettings.width

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  width="100"/>
</ejs-treemap>
Shape Height Property: legendSettings.iconHeight

<ej-treemap id="treemap">
<e-legend-settings
  icon-height="15"/>
</ej-treemap>		 Property: legendSettings.shapeHeight

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  shapeHeight="15"/>
</ejs-treemap>
Shape Width Property: legendSettings.iconWidth

<ej-treemap id="treemap">
<e-legend-settings
  icon-width="8"/>
</ej-treemap>		 Property: legendSettings.shapeWidth

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  shapeWidth="8"/>
</ejs-treemap>
Padding Not Applicable Property: legendSettings.shapePadding

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  shapePadding="10"/>
</ejs-treemap>
Legend Title Property: legendSettings.title

<ej-treemap id="treemap">
<e-legend-settings
  title="Population"/>
</ej-treemap>		 Property: legendSettings.title

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  title="Population"/>
</ejs-treemap>
Legend Shape Not Applicable Property: legendSettings.shape

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  shape="Rectangle"/>
</ejs-treemap>
Legend Mode Property: legendSettings.mode

<ej-treemap id="treemap">
<e-legend-settings
  mode="Interactive"/>
</ej-treemap>		 Property: legendSettings.mode

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  mode="Interactive"/>
</ejs-treemap>
Legend Text Customization Not Applicable Property: legendSettings.textStyle

var style = new
  LegendSettingsTextStyleLegendSettings {
  Size = '10px', Opacity = 0.5, Color = "red" };
<ejs-treemap id="treemap">
<e-treemap-legendsettings
  textStyle="style"/>
</ejs-treemap>
Legend Title Customization Not Applicable Property: legendSettings.titleStyle

var style = new
  LegendSettingsTitleStyleLegendSettings {
  Size = '10px', Opacity = 0.5, Color = "red" };
<ejs-treemap id="treemap">
<e-treemap-legendsettings
  titleStyle="style"/>
</ejs-treemap>
Legend Shape Border Not Applicable Property: legendSettings.shapeBorder

var style = new
  LegendSettingsBorderLegendSettings {
  Color = "red", Width = 2 };
<ejs-treemap id="treemap">
<e-treemap-legendsettings
  shapeBorder="style"/>
</ejs-treemap>
Legend Template Property: legendSettings.template

<ej-treemap id="treemap">
<e-legend-settings
  template="template"/>
</ej-treemap>		 Not Applicable
Left Label Property: legendSettings.leftLabel

<ej-treemap id="treemap">
<e-legend-settings
  left-label="10Million"/>
</ej-treemap>		 Not Applicable
Right Label Property: legendSettings.rightLabel

<ej-treemap id="treemap">
<e-legend-settings
  right-label="100Million"/>
</ej-treemap>		 Not Applicable
Legend Shape Image Not Applicable Property: legendSettings.imageUrl

<ej-treemap id="treemap">
<e-treemap-legendsettings
  imageUrl="image.png"/>
</ej-treemap>
Position in Intractive Legend Not Applicable Property: legendSettings.labelPosition

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  labelPosition="Before"/>
</ejs-treemap>
Legend Orientation Not Applicable Property: legendSettings.orientation

<ejs-treemap id="treemap">
<e-treemap-legendsettings
  orientation="Horizontal"/>
</ejs-treemap>

Levels

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

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

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

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

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

var border = new TreeMapBorder { Color = "#58585B" };
<ejs-treemap id="treemap">
<e-treemap-levels>
  <e-treemap-level border="border"/>
</e-treemap-levels>
</ejs-treemap>
Level Border Width Property: levels.groupBorderThickness

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

var border = new TreeMapBorder { Width = 2 };
<ejs-treemap id="treemap">
<e-treemap-levels>
  <e-treemap-level border="border"/>
</e-treemap-levels>
</ejs-treemap>
Group Gap Property: levels.groupGap

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

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

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

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

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

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

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

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

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

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

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

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

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

<ej-treemap id="treemap">
<e-levels>
  <e-level label-position="TopLeft"/>
</e-levels>
</ej-treemap>		 Property: levels.templatePosition

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

var style = new
  LeafItemSettingsLabelStyleLeafItemSettings {
  Size = '16px', Color = 'red', Opacity = 0.7 };
<ejs-treemap id="treemap">
<e-treemap-levels>
  <e-treemap-level headerStyle="style"/>
</e-treemap-levels>
</ejs-treemap>
Header Format Not Applicable Property: levels.headerFormat

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

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

Selection

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

<ej-treemap id="treemap"
  selection-mode="Default">
</ej-treemap>		 Property: selectionSettings.mode

<ejs-treemap id="treemap">
  <e-treemap-selectionsettings
  enable="true", mode="Item"/>
</ejs-treemap>
Selection Color Not Applicable Property: selectionSettings.fill

<ejs-treemap id="treemap">
  <e-treemap-selectionsettings
  enable="true", fill="blue"/>
</ejs-treemap>
Selection Color Opacity Not Applicable Property: selectionSettings.opacity

<ejs-treemap id="treemap">
  <e-treemap-selectionsettings
  enable="true", opacity="0.6"/>
</ejs-treemap>
Border for selection Not Applicable Property: selectionSettings.border

var border = new
  SelectionSettingsBorderSelectionSettings {
  Color = "white", Width = 0.5 };
<ejs-treemap id="treemap">
  <e-treemap-selectionsettings
  border="border"/>
</ejs-treemap>

Hightlight

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

<ej-treemap id="treemap"
  highlight-group-on-selection="true">
</ej-treemap>		 Property: highlightSettings.mode

<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", mode="All"/>
</ejs-treemap>
Highlight Selection Mode Property: highlightOnSelection

<ej-treemap id="treemap"
  highlight-on-selection="true">
</ej-treemap>		 Property: highlightSettings.mode

<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", mode="Item"/>
</ejs-treemap>
Highlight Group Border Color Property: highlightGroupBorderBrush

<ej-treemap id="treemap"
  highlight-border-brush="gray">
</ej-treemap>		 Property: highlightSettings.border.color

var border = new
  HighlightSettingsBorderHighlightSettings {
  Color = "gary" };
<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", mode="All", border="border"/>
</ejs-treemap>
Highlight Group Border Width Property: highlightGroupBorderThickness

<ej-treemap id="treemap"
  highlight-border-thickness="3">
</ej-treemap>		 Property: highlightSettings.border.width

var border = new
  HighlightSettingsBorderHighlightSettings {
  Width = 3 };
<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", mode="All", border="border"/>
</ejs-treemap>
Highlight Selection Border Color Property: highlightBorderBrush

<ej-treemap id="treemap"
  highlight-border-brush="gray">
</ej-treemap>		 Property: highlightSettings.border.color

var border = new
  HighlightSettingsBorderHighlightSettings {
  Color = "gary" };
<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", mode="Item", border="border"/>
</ejs-treemap>
Highlight Selection Border Width Property: highlightBorderThickness

<ej-treemap id="treemap"
  highlight-border-thickness="3">
</ej-treemap>		 Property: highlightSettings.border.width

var border = new
  HighlightSettingsBorderHighlightSettings {
  Width = 3 };
<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", mode="Item", border="border"/>
</ejs-treemap>
Highlight Color Not Applicable Property: highlightSettings.fill

<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", fill="red"/>
</ejs-treemap>
Highlight Color Opacity Not Applicable Property: highlightSettings.opacity

<ejs-treemap id="treemap">
  <e-treemap-highlightsettings
  enable="true", fill="red", opacity="0.5"/>
</ejs-treemap>

Range ColorMapping

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

<ej-treemap id="treemap">
<e-range-color-mappings>
  <e-range-color-mapping from="1000"/>
</e-range-color-mappings>
</ej-treemap>		 Property: leafItemSettings.colorMapping.from

var map = new { from = 1000 };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
To value Property: rangeColorMapping.to

<ej-treemap id="treemap">
<e-range-color-mappings>
  <e-range-color-mapping to="10000"/>
</e-range-color-mappings>
</ej-treemap>		 Property: leafItemSettings.colorMapping.to

var map = new { to = 10000 };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
Color Property: rangeColorMapping.color

<ej-treemap id="treemap">
<e-range-color-mappings>
  <e-range-color-mapping color="#77D8D8"/>
</e-range-color-mappings>
</ej-treemap>		 Property: leafItemSettings.colorMapping.color

var map = new { color = "#77D8D8" };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
Legend Label Property: rangeColorMapping.legendLabel

<ej-treemap id="treemap">
<e-range-color-mappings>
  <e-range-color-mapping legendlabel="Growth"/>
</e-range-color-mappings>
</ej-treemap>		 Property: leafItemSettings.colorMapping.label

var map = new { label = "Growth" };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>

Desaturation ColorMapping

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

<ej-treemap id="treemap">
  <e-desaturation-color-mapping from = "1000"/>
</ej-treemap>		 Property: leafItemSettings.colorMapping.from

var map = new { from = 1000 };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
To value Property: desaturationColorMapping.to

<ej-treemap id="treemap">
  <e-desaturation-color-mapping to = "10000"/>
</ej-treemap>		 Property: leafItemSettings.colorMapping.to

var map = new { to = 10000 };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
Color Property: desaturationColorMapping.color

<ej-treemap id="treemap">
  <e-desaturation-color-mapping color="#77D8D8"/>
</ej-treemap>		 Property: leafItemSettings.colorMapping.color

var map = new { color = "#77D8D8" };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
Value Not Applicable Property: leafItemSettings.colorMapping.value

var map = new { value = "Population" };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
Minimum Opacity Not Applicable Property: leafItemSettings.colorMapping.minOpacity

var map = new { minOpacity = 0.7 };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>
Maximum Opacity Not Applicable Property: leafItemSettings.colorMapping.maxOpacity

var map = new { maxOpacity = 1 };
<ejs-treemap id="treemap">
  <e-treemap-leafitemsettings
  colorMapping="map"/>
</ejs-treemap>

Tooltip

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

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

<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  visible="true"/>
</ejs-treemap>
Tooltip Template Property: tooltipTemplate

<ej-treemap id="treemap"
  tooltip-template="template">
</ej-treemap>		 Property: tooltipSettings.template

<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  template="template"/>
</ejs-treemap>
Tooltip Border Not Applicable Property: tooltipSettings.border

var border = new TreeMapBorder{ Color = "red", Width = 2 };
<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  border="border"/>
</ejs-treemap>
Tooltip Color Not Applicable Property: tooltipSettings.fill

<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  fill="gray"/>
</ejs-treemap>
Tooltip Format Not Applicable Property: tooltipSettings.format

<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  format="${Population}"/>
</ejs-treemap>
Tooltip Marker Shape Not Applicable Property: tooltipSettings.markerShapes

<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  markerShapes="Circle"/>
</ejs-treemap>
Tooltip Color Opacity Not Applicable Property: tooltipSettings.opacity

<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  opacity="0.5"/>
</ejs-treemap>
Tooltip Text Style Not Applicable Property: tooltipSettings.textStyle

var style = new
  TooltipSettingsTextStyleTooltipSettings {
  Size = '12px', Opacity = 0.5, Color = "red" };
<ejs-treemap id="treemap">
  <e-treemap-tooltipsettings
  textStyle="style"/>
</ejs-treemap>

Drilldown

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

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

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

<ej-treemap id="treemap"
  drill-down-level="1">
</ej-treemap>		 Property: InitialDrillSettings.groupIndex

<ejs-treemap id="treemap">
  <e-treemap-initialdrilldown
  groupIndex="1"/>
</ejs-treemap>

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);
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"
</ejs-treemap>
function load(args) { }
Treemap Loaded Event Not Applicable Event: loaded

<ejs-treemap id="treemap"
  loaded="loaded"
</ejs-treemap>
function loaded(args) { }
Event Before Print Not Applicable Event: beforePrint

<ejs-treemap id="treemap"
  beforePrint="beforePrint"
</ejs-treemap>
function beforePrint(args) { }
Click Event Event: click

<ej-treemap id="treemap"
  click="click">
</ej-treemap>
function click(args) { }		 Event: click

<ejs-treemap id="treemap"
  click="click"
</ejs-treemap>
function click(args) { }
Drill Start Event Not Applicable Event: drillStart

<ejs-treemap id="treemap"
  drillStart="drillStart"
</ejs-treemap>
function click(args) { }
Drill End Event Not Applicable Event: drillEnd

<ejs-treemap id="treemap"
  drillEnd="drillEnd"
</ejs-treemap>
function drillEnd(args) { }
Event on Item Click Not Applicable Event: itemClick

<ejs-treemap id="treemap"
  itemClick="itemClick"
</ejs-treemap>
function itemClick(args) { }
Treemap Item Select Event Event: treeMapItemSelected

<ej-treemap id="treemap"
  tree-map-item-selected="treeMapItemSelected">
</ej-treemap>
function treeMapItemSelected(args) { }		 Event: itemSelected

<ejs-treemap id="treemap"
  itemSelected="itemSelected"
</ejs-treemap>
function itemSelected(args) { }
Treemap Item Rendering Event Event: itemRendering

<ej-treemap id="treemap"
  item-rendering="itemRendering">
</ej-treemap>
function itemRendering(args) { }		 Event: itemRendering

<ejs-treemap id="treemap"
  itemRendering="itemRendering"
</ejs-treemap>
function itemRendering(args) { }
Treemap Item Move Event Not Applicable Event: itemMove

<ejs-treemap id="treemap"
  itemMove="itemMove"
</ejs-treemap>
function itemMove(args) { }
Treemap Item Highlight Event Not Applicable Event: itemHighlight

<ejs-treemap id="treemap"
  itemHighlight="itemHighlight"
</ejs-treemap>
function itemHighlight(args) { }
Template Header Render Event Event: headerTemplateRendering

<ej-treemap id="treemap"
  header-template-rendering="headerTemplateRendering">
</ej-treemap>
function headerTemplateRendering(args) { }		 Not Applicable
Drilldown Item Select Event Event: drillDownItemSelected

<ej-treemap id="treemap"
  drill-down-item-selected="drillDownItemSelected">
</ej-treemap>
function drillDownItemSelected(args) { }		 Not Applicable
Mouse Event Not Applicable Event: mouseMove

<ejs-treemap id="treemap"
  mouseMove="mouseMove"
</ejs-treemap>
function mouseMove(args) { }
Resize Event Not Applicable Event: resize

<ejs-treemap id="treemap"
  resize="resize"
</ejs-treemap>
function resize(args) { }
Tooltip Render Event Not Applicable Event: tooltipRendering

<ejs-treemap id="treemap"
  tooltipRendering="tooltipRendering"
</ejs-treemap>
function tooltipRendering(args) { }
Double Click Event Event: doubleClick

<ej-treemap id="treemap"
  double-click="doubleClick">
</ej-treemap>
function doubleClick(args) { }		 Not Applicable
Right Click Event Event: rightClick

<ej-treemap id="treemap"
  right-click="rightClick">
</ej-treemap>
function rightClick(args) { }		 Not Applicable
Previous
Next