The treemap can be easily configured to the DOM element, such as div and can be created with a highly customized look and feel.

{% highlight html %}

{% endhighlight %}

• module:jQuery

• module:ej.datavisualization.TreeMap

• module:JsRender

• module:properties

{:#members:borderbrush}

Specifies the border brush color of the treemap

• "white"

{% highlight js %}

{% endhighlight %}

{:#members:borderthickness}

Specifies the border thickness of the treemap

• 1

{% highlight js %}

<ej-treemap id="treemap" [borderThickness] = "1" >

{% endhighlight %}

{:#members:unicolormapping}

Specifies the uniColorMapping settings of the treemap

{:#members:unicolormapping-color}

Specifies the uniform color mapping of the treemap

• null

{% highlight js %}

{% endhighlight %}

{:#members:desaturationcolormapping}

Specifies the desaturationColorMapping settings of the treemap

{:#members:desaturationcolormapping-to}

Specifies the to value for desaturation color mapping

• 0

{% highlight js %}

{% endhighlight %}

{:#members:desaturationcolormapping-color}

Specifies the color for desaturationColorMapping

• null

{% highlight js %}

{% endhighlight %}

{:#members:desaturationcolormapping-from}

Specifies the from value for desaturation color mapping

• 0

{% highlight js %}

{% endhighlight %}

{:#members:desaturationcolormapping-rangemaximum}

Specifies the rangeMaximum value for desaturation color mapping

• 0

{% highlight js %}

{% endhighlight %}

{:#members:desaturationcolormapping-rangeminimum}

Specifies the rangeMinimum value for desaturation color mapping

• 0

{% highlight js %}

{% endhighlight %}

{:#members:palettecolormapping}

Specifies the paletteColorMapping of the treemap

{:#members:palettecolormapping-colors}

Specifies the colors of the paletteColorMapping

• []

{% highlight js %}

{% endhighlight %}

{% highlight ts %}

this.colorMapping = ["red","green","blue", "yellow"];

{% endhighlight %}

{:#members:colorvaluepath}

Specifies the color value path of the treemap

• null

{% highlight js %}

{% endhighlight %}

{:#members:datasource}

Specifies the datasource of the treemap

• null

{% highlight js %}

<ej-treemap id="treemap" [dataSource]='medal_data' >

{% endhighlight %}

{:#members:dockposition}

• top

{% highlight js %}

{% endhighlight %}

{:#members:drilldownheadercolor}

specifies the drillDown header color

####Default Value

• 'null'

{% highlight js %}

{% endhighlight %}

{:#members:drilldownselectioncolor}

specifies the drillDown selection color

• '#000000'

{% highlight js %}

{% endhighlight %}

{:#members:ishierarchicaldatasource}

Specifies whether datasource is hierarchical or not.

• false

{:.example}

{% highlight js %}

{% endhighlight %}

{:#members:header}

Specifies the header for parent item during drilldown. This is applicable only for hierarchical data source.

• null

{:.example}

{% highlight js %}

{% endhighlight %}

{:#members:enabledrilldown}

Enable/Disable the drillDown for treemap

• false

{:.example}

{% highlight js %}

<ej-treemap id="treemap" [enableDrillDown]='true' >

{% endhighlight %}

{:#members:isresponsive}

Controls whether Treemap has to be responsive while resizing the window.

• true

{% highlight js %}

<ej-treemap id="treemap" [isResponsive]='true' >

{% endhighlight %}

{:#members:enableresize}

Specifies whether treemap need to resize when container is resized

• true

{% highlight js %}

<ej-treemap id="treemap" [enableResize]='true' >

{% endhighlight %}

{:#members:draggingOnSelection}

This property is used to select treemap items while clicking and dragging

• false

{% highlight js %}

<ej-treemap id="treemap" [draggingOnSelection]='false' >

{% endhighlight %}

{:#members:draggingGroupOnSelection}

This property is used to select group of treemap items while clicking and dragging

• false

{% highlight js %}

<ej-treemap id="treemap" [draggingGroupOnSelection]='false' >

{% endhighlight %}

{:#members:groupcolormapping}

Specifies the group color mapping of the treemap

• []

{% highlight ts %}

this.groupColor = [{ groupID: 'Asia', rangeColorMapping: [{ color: "red", from: "20000000", to: "2128657283"}] }];

{% endhighlight %}

{% highlight js %}

<ej-treemap id="treemap" [groupColorMapping]='groupColor' >

{% endhighlight %}

{:#members:groupcolormapping-groupid}

Specifies the groupID for GroupColorMapping.

• null

{% highlight js %}

<ej-treemap id="treemap" [groupColorMapping]='groupColor' >

{% endhighlight %}

{% highlight ts %}

this.groupColor = [{ groupID: 'Asia', }]

{% endhighlight %}

{:#members:legendsettings}

Specifies the legend settings of the treemap

{:#members:legendsettings-height}

Specifies the height for legend

• 30

{% highlight js %}

<ej-treemap id="treemap" [legendSettings.height]=40 >

{% endhighlight %}

{:#members:legendsettings-width}

Specifies the width for legend

• 100

{% highlight js %}

<ej-treemap id="treemap" [legendSettings.width]=100 >

{% endhighlight %}

{:#members:legendsettings-iconheight}

Specifies the iconHeight for legend

• 15

{% highlight js %}

<ej-treemap id="treemap" [legendSettings.iconHeight]=15 >

{% endhighlight %}

{:#members:legendsettings-iconwidth}

Specifies the iconWidth for legend

• 15

{% highlight js %}

<ej-treemap id="treemap" [legendSettings.iconWidth]=15 >

{% endhighlight %}

{:#members:legendsettings-template}

Specifies the template for legendSettings

• null

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-mode}

Specifies the mode for legendSettings whether default or interactive mode

• "default"

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-title}

Specifies the title text for legend

• ""

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-leftlabel}

Specifies the leftLabel text for legend

• ""

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-rightlabel}

Specifies the rightLabel text for legend

• ""

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-dockposition}

Specifies the dockPosition text for legend

• "top"

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-alignment}

Specifies the alignment text for legend

• "near"

{% highlight js %}

{% endhighlight %}

{:#members:legendsettings-columncount}

Specifies the alignment text for legend

• 0

{% highlight js %}

{% endhighlight %}

{:#members:highlightborderbrush}

Specifies the highlight border brush of treemap

• "gray"

{% highlight js %}

<ej-treemap id="treemap" [highlightBorderBrush]='gray' >

{% endhighlight %}

{:#members:highlightborderthickness}

Specifies the border thickness when treemap items is highlighted in the treemap

• 5

{% highlight js %}

<ej-treemap id="treemap" [highlightBorderThickness]='5' >

{% endhighlight %}

{:#members:highlightgroupborderbrush}

Specifies the highlight border brush of treemap

• "gray"

{% highlight js %}

<ej-treemap id="treemap" [highlightGroupBorderBrush]='gray' >

{% endhighlight %}

{:#members:highlightgroupborderthickness}

Specifies the border thickness when treemap items is highlighted in the treemap

• 5

{% highlight js %}

<ej-treemap id="treemap" [highlightGroupBorderThickness]='5' >

{% endhighlight %}

{:#members:highlightgrouponselection}

Specifies whether treemap item need to highlighted on selection

• false

{:.example}

{% highlight js %}

<ej-treemap id="treemap" [highlightGroupOnSelection]='false' >

{% endhighlight %}

{:#members:highlightonselection}

Specifies whether treemap item need to highlighted on selection

• false

{% highlight js %}

<ej-treemap id="treemap" [highlightOnSelection]='false' >

{% endhighlight %}

{:#members:itemslayoutmode}

• "Squarified"

{% highlight js %}

{% endhighlight %}

{:#members:enablegroupseparator}

Specify to convert the date object to string, using locale settings.

• false

{% highlight js %}

{% endhighlight %}

{:#members:locale}

Name of the culture based on which Tree Map should be localized.

• "en-US"

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings}

Specifies the leaf settings of the treemap

{:#members:leafitemsettings-borderbrush}

Specifies the border brush color of the leaf item.

• "white"

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings-borderthickness}

Specifies the border thickness of the leaf item.

• 1

{% highlight js %}

<ej-treemap id="treemap" [leafItemSettings.borderThickness]= '1' >

{% endhighlight %}

{:#members:leafitemsettings-gap}

Specifies the space between the leaf items.

• 0

{% highlight js %}

<ej-treemap id="treemap" [leafItemSettings.gap]= '1' >

{% endhighlight %}

{:#members:leafitemsettings-itemtemplate}

Specifies the label template of the leaf item.

• null

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings-labelpath}

Specifies the label path of the leaf item.

• null

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings-labelposition}

• center

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings-textOverflow}

• none

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings-labelvisibilitymode}

• visible

{% highlight js %}

{% endhighlight %}

{:#members:leafitemsettings-showlabels}

Shows or hides the label of the leaf item.

• "false"

{% highlight js %}

<ej-treemap id="treemap" [leafItemSettings.showLabels]= 'false' >

{% endhighlight %}

{:#members:rangecolormapping}

Specifies the rangeColorMapping settings of the treemap

• []

{% highlight js %}

{% endhighlight %}

{:#members:rangecolormapping-color}

Specifies the color value for rangeColorMapping.

• null

{% highlight js %}

{% endhighlight %}

{:#members:rangecolormapping-gradientcolors}

specifies the gradient colors for th given range value

• []

{% highlight ts %}

this.colorMapping = [{ from: "0", to: "1", gradientColors: ["#fde6cc", "#fab665"] }];

{% endhighlight %}

{% highlight js %}

<ej-treemap id="treemap" [rangeColorMapping]='colorMapping'>
{% endhighlight %}

{:#members:rangecolormapping-from}

Specifies the from value for rangeColorMapping.

• -1

{% highlight js %}

{% endhighlight %}

{:#members:rangecolormapping-legendlabel}

Specifies the legend label value for rangeColorMapping.

• null

{% highlight js %}

{% endhighlight %}

{:#members:rangecolormapping-to}

Specifies the to value for rangeColorMapping.

• -1

{% highlight js %}

{% endhighlight %}

{:#members:selectionmode}

• "default"

{% highlight js %}

<ej-treemap id="treemap" [selectionMode]="default">

{% endhighlight %}

{:#members:groupselectionmode}

• "default"

{% highlight js %}

<ej-treemap id="treemap" [groupSelectionMode]="default">

{% endhighlight %}

{:#members:showlegend}

Specifies the legend visibility status of the treemap

• false

{% highlight js %}

<ej-treemap id="treemap" [showLegend]="false">

{% endhighlight %}

{:#members:enableGradient}

Specifies whether gradient color has to be applied for treemap items

• false

{% highlight js %}

<ej-treemap id="treemap" [enableGradient]="true">

{% endhighlight %}

{:#members:showTooltip}

Specifies whether treemap showTooltip need to be visible

{% highlight js %}

<ej-treemap id="treemap" [showTooltip]="false">

{% endhighlight %}

{:#members:tooltiptemplate}

Specifies the tooltip template of the treemap

• null

{% highlight js %}

<ej-treemap id="treemap" [tooltipTemplate]="template">

{% endhighlight %}

{:#members:treemapitems}

Hold the treeMapItems to be displayed in treemap

• []

{% highlight js %}

<ej-treemap id="treemap" [treeMapItems]="items">

{% endhighlight %}

{% highlight ts %}

this.items=[];

{% endhighlight %}

{:#members:levels}

Specify levels of treemap for grouped visualization of data

• []

{% highlight js %}

{% endhighlight %}

{:#members:levels-groupbackground}

specifies the group background

• null

{% highlight js %}

{% endhighlight %}

{:#members:levels-groupbordercolor}

Specifies the group border color for tree map level.

• null

{% highlight js %}

{% endhighlight %}

{:#members:levels-groupborderthickness}

Specifies the group border thickness for tree map level.

• 1

{% highlight js %}

{% endhighlight %}

{:#members:levels-groupgap}

Specifies the group gap for tree map level.

• 1

{% highlight js %}

{% endhighlight %}

{:#members:levels-grouppadding}

Specifies the group padding for tree map level.

• 4

{% highlight js %}

/ <e-level [groupPadding]="4">

{% endhighlight %}

{:#members:levels-grouppath}

Specifies the group path for tree map level.

{% highlight js %}

{% endhighlight %}

{:#members:levels-headerheight}

Specifies the header height for tree map level.

• 0

{% highlight js %}

{% endhighlight %}

{:#members:levels-headertemplate}

Specifies the header template for tree map level.

• null

{% highlight js %}

{% endhighlight %}

{:#members:levels-headervisibilitymode}

• visible

{% highlight js %}

{% endhighlight %}

{:#members:levels-labelposition}

Specifies the position of the labels.

• center

{% highlight js %}

{% endhighlight %}

{:#members:levels-textOverflow}

Specifies the overflow options for leaf labels.

• none

{% highlight js %}

{% endhighlight %}

{:#members:levels-labeltemplate}

Specifies the label template for tree map level.

• null

{% highlight js %}

{% endhighlight %}

{:#members:levels-labelvisibilitymode}

Specifies the mode of label visibility

• visible

{% highlight js %}

{% endhighlight %}

{:#members:levels-showheader}

Shows or hides the header for tree map level.

• false

{% highlight js %}

{% endhighlight %}

{:#members:levels-showlabels}

Shows or hides the labels for tree map level.

• false

{% highlight js %}

{% endhighlight %}

{:#members:weightvaluepath}

Specifies the weight value path of the treemap

• null

{% highlight js %}

{% endhighlight %}

{:#methods:refresh}

Method to reload treemap with updated values.

{% highlight ts %}

refresh(){

 //Do something
 this.treemap.widget.refresh();

}

{% endhighlight %}

{:#events:treemapitemselected}

Triggers on treemap item selected.

{% highlight js %}

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

{% endhighlight %}

{% highlight ts %}

treeMapitemselected(sender) {

// do something

}

{% endhighlight %}

{:#events:drillstarted}

Triggers when drilldown is started

{% highlight js %}

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

{% endhighlight %}

{% highlight ts %}

drillStarted(sender) {

// do something

} {% endhighlight %}

{:#events:drilldownitemselected}

Triggers on treemap drilldown item selected.

{% highlight js %}

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

{% endhighlight %}

{% highlight ts %}

drilldownitemselected(sender) {

// do something

}

{% endhighlight %}

{:#events:headerTemplateRendering}

Triggers before rendering the treemap drilldown header template

{% highlight js %}

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

{% endhighlight %}

{% highlight ts %}

headerTemplateRenderer(sender) {

// do something

}

{% endhighlight %}

{:#events:refreshed}

Triggers after refreshing the treemap items.

{% highlight js %}

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

{% endhighlight %}

{% highlight ts %}

refreshed(sender) {

// do something

}

{% endhighlight %}

{:#events:treeMapGroupSelected}

Triggers when the group selection is performed on treemap items.

{% highlight js %}

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

{% endhighlight %}

{% highlight ts %}

treemapGroupSelected(sender) {

// do something

}

{% endhighlight %}