Essential HeatMap JS represents tabular data values as gradient colors instead of numbers,low and high values are different colors with different gradients.

• module:ej.heatmap.base.js
• module:ej.heatmap.js
• module:ej.core.js
• module:ej.data.js
• module:ej.globalize.js
• module:ej.touch.js
• module:ej.scroller.js

{:#members:width}

Specifies the width of the heat map.

• null

{% highlight html %}

{% endhighlight %}

{:#members:height}

Specifies the width of the heat map.

• null

{% highlight html %}

{% endhighlight %}

{:#members:id}

Specifies the name of the heat map.

• null

{% highlight html %}

{% endhighlight %}

{:#members:showtooltip}

Enables or disables tooltip of heatmap

• true

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip">

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

{% endhighlight %}

{:#members:tooltipsettings}

Defines the tooltip that should be shown when the mouse hovers over rows/columns.

{:#members:tooltipsettings-templateid}

Defines the tooltip that should be shown when the mouse hovers over rows/columns.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.tooltipSettings = {templateId:"mouseovertoolTipId"}

{% endhighlight %}

{:#members:tooltipsettings-associate}

Defines the tooltip of associate that should be shown when the mouse hovers over rows/columns.

• mouseFollow

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

this.tooltipSettings = {templateId:"mouseovertoolTipId",associate:"mouseFollow"}

{% endhighlight %}

{:#members:tooltipsettings-isballoon}

Enables/ disables the balloon for the tooltip to be shown

• true

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

this.tooltipSettings = {templateId:"mouseovertoolTipId",associate:"mouseFollow",isBalloon: true,}

{% endhighlight %}

{:#members:tooltipsettings-position}

Defines various attributes of the Tooltip position

{:#members:tooltipsettings-position-target}

Sets the Tooltip position against target.

{:#members:tooltipsettings-position-target-horizontal}

Sets the arrow position again popup based on horizontal(x) value

• center

{:#members:tooltipsettings-position-target-vertical}

Sets the arrow position again popup based on vertical(y) value

• top

{:#members:tooltipsettings-position-stem}

Sets the arrow position again popup.

{:#members:tooltipsettings-position-stem-horizontal}

Sets the arrow position again popup based on horizontal(x) value

• center

{:#members:tooltipsettings-position-stem-vertical}

Sets the arrow position again popup based on vertical(y) value

• bottom

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

this.tooltipSettings = {templateId:"mouseovertoolTipId",associate:"mouseFollow", isBalloon:true,position: { stem: { horizontal: "left"}, }, }

{% endhighlight %}

{:#members:tooltipsettings-trigger}

Defines the tooltip to be triggered.

• hover

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

this.tooltipSettings = {templateId:"mouseovertoolTipId",associate:"mouseFollow", isBalloon:true, trigger:"click"}

{% endhighlight %}

{:#members:tooltipsettings-animation}

Defines the animation for the tooltip that should be shown when the mouse hovers over rows/columns.

{:#members:tooltipsettings-animation-effect}

Defines the animation effect for the tooltip that should be shown when the mouse hovers over rows/columns.

• none

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

this.tooltipSettings = {templateId:"mouseovertoolTipId",animation:{effect:"none"}}

{% endhighlight %}

{:#members:tooltipsettings-animation-speed}

Defines the animation speed for the tooltip that should be shown when the mouse hovers over rows/columns.

• 0

{% highlight html %}

<ej-heatmap id="heatmap1" [showTooltip] = "showTooltip" [tooltipSettings] = "toolTipSettings" >

{% endhighlight %}

{% highlight ts %}

this.showTooltip = true;

this.tooltipSettings = {templateId:"mouseovertoolTipId",animation:{effect:"none", speed:0}}

{% endhighlight %}

{:#members:itemssource}

Specifies the source data of the heat map.

• []

{% highlight ts %}

let itemsSource = []; let coloumns = ['Vegie-spread', 'Tofuaa', 'Alice Mutton', 'Konbu', 'Fløtemysost', 'Perth Pasties', 'Boston Crab Meat', 'Raclette Courdavault']; for (let i = 0; i < coloumns.length; i++) { for(let j=0;j<6;j++){ let value = Math.floor((Math.random() * 100) + 1); itemsSource.push({ ProductName: coloumns[i], Year: "Y" + (2011 + j), Value: value }); }

    }

    this.itemsSource = itemsSource;

{% endhighlight %}

{:#members:heatmapcell}

Specifies the property of the heat map cell.

• Null

{% highlight html %}

<ej-heatmap id="heatmap1" [heatMapCell]= "heatmapCell">

{% endhighlight %}

{% highlight ts %}

this.heatmapCell = {showColor: true };

{% endhighlight %}

{:#members:heatmapcell-showcontent}

Specifies whether the cell content can be visible or not.

• ej.HeatMap.CellVisibility.Visible

{% highlight html %}

<ej-heatmap id="heatmap1" [heatMapCell]= "heatmapCell">

{% endhighlight %}

{% highlight ts %}

this.heatmapCell = { showContent:ej.datavisualization.HeatMap.CellVisibility.Hidden };

{% endhighlight %}

{:#members:heatmapcell-showcolor}

Specifies whether the cell color can be visible or not.

• true

{% highlight html %}

<ej-heatmap id="heatmap1" [heatMapCell]= "heatmapCell">

{% endhighlight %}

{% highlight ts %}

this.heatmapCell = {showColor: false };

{% endhighlight %}

{:#members:isresponsive}

Specifies can enable responsive mode or not for heat map.

• false

{% highlight html %}

<ej-heatmap id="heatmap1" [isResponsive] ="isResponsive">

{% endhighlight %}

{% highlight ts %}

this.isResponsive = true;

{% endhighlight %}

{:#members:enablevirtualization}

Specifies whether the virtualization can be enable or not.

• false

{% highlight ts %}

@ViewChild('heatmap1') HeatMap: EJComponents<any,any>;

this.HeatMap.widget.enableVirtualization = true;

{% endhighlight %}

{:#members:defaultcolumnstyle}

Specifies the default column properties for all the column style not specified in column properties.

• []

{% highlight ts %}

this.defaultColumnStyle = {textAlign: "left"}

{% endhighlight %}

{:#members:defaultcolumnstyle-textalign}

Specifies the alignment mode of the heat map column.

Enables/disables the bold style

• ej.HeatMap.TextAlign.Center

{% highlight ts %}

this.defaultColumnStyle = {textAlign: "left"}

{% endhighlight %}

{:#members:defaultcolumnstyle-headertemplateid}

Specifies the template id of the heat map column header.

• ""

{% highlight ts %}

{% endhighlight %}

{% highlight ts %}

this.defaultColumnStyle = {textAlign: "left" templateId= "template"}

{% endhighlight %}

{:#members:defaultcolumnstyle-templateid}

Specifies the template id of all individual cell data of the heat map.

• ""

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

this.defaultColumnStyle = {headerTemplateID: "columnTemplate"}

{% endhighlight %}

{:#members:legendcollection}

Specifies the no of legends can sync with heat map.

• []

{% highlight html %}

<ej-heatmap id="heatmap1" [legendCollection]="legendCollection">

{% endhighlight %}

{% highlight ts %}

this.legendCollection = ['heatmaplegend'];

{% endhighlight %}

{:#members:itemsmapping}

Specifies the property and display value of the heat map column.

• []

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { column: { "propertyName": "ProductName", "displayName": "Product Name" }, row: { "propertyName": "Year", "displayName": "Year" } };

{% endhighlight %}

{:#members:itemsmapping-columnstyle}

Column settings for the individual heat map column.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { textAlign: ej.HeatMap.TextAlign.Left } };

{% endhighlight %}

{:#members:itemsmapping-columnstyle-width}

Specifies the width of the heat map column.

• 0

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { width:100 } };

{% endhighlight %}

{:#members:itemsmapping-columnstyle-textAlign}

Specifies the text align mode of the heat map column.

• ej.HeatMap.TextAlign.Center

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { textAlign: ej.HeatMap.TextAlign.Left } };

{% endhighlight %}

{:#members:itemsmapping-columnstyle-headertemplateid}

Specifies the template id of the column header.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { headerTemplateID: "template" } };

{% endhighlight %}

{:#members:itemsmapping-columnstyle-templateid}

Specifies the template id of all individual cell data.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { templateID: "template" } };

{% endhighlight %}

{:#members:itemsmapping-column}

Specifies the property and display value of the column.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { "propertyName": "ProductName", "displayName": "Product Name" } };

{% endhighlight %}

{:#members:itemsmapping-column-propertyname}

Specifies the name of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { "opertyName": "ProductName" } };

{% endhighlight %}

{:#members:itemsmapping-column-displayname}

Specifies the value of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnStyle: { "displayName": "Product Name" } };

{% endhighlight %}

{:#members:itemsmapping-row}

Specifies the row property and display value of the heat map.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { row: { "propertyName": "ProductName", "displayName": "Product Name" } };

{% endhighlight %}

{:#members:itemsmapping-row-propertyname}

Specifies the name of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { row: { "propertyName": "ProductName" } };

{% endhighlight %}

{:#members:itemsmapping-row-displayname}

Specifies the value of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { row: { "dislpayName": "ProductName" } };

{% endhighlight %}

{:#members:itemsmapping-value}

Specifies the property and display value of the column value.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { value: { "propertyName": "Value" } };

{% endhighlight %}

{:#members:itemsmapping-value-propertyname}

Specifies the name of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { value: { "propertyName": "productName" } };

{% endhighlight %}

{:#members:itemsmapping-value-displayname}

Specifies the value of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { value: { "displayName": "productName" } };

{% endhighlight %}

{:#members:itemsmapping-headermapping}

Specifies the property and display value of the header.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { headerMapping: { "propertyName": "Year" , "displayName":"Year" } };

{% endhighlight %}

{:#members:itemsmapping-headermapping-propertyname}

Specifies the name of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { headerMapping: { "propertyName": "Year" } };

{% endhighlight %}

{:#members:itemsmapping-headermapping-displayname}

Specifies the value of the column or row.

• ""

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { headerMapping: { "displayName": "Year" } };

{% endhighlight %}

{:#members:itemsmapping-headermapping-columnstyle}

Specifies the property and display value of the header.

• null

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { headerMapping: { "columnStyle": { width: 105, textAlign: "right" } } };

{% endhighlight %}

{:#members:itemsmapping-columnmapping}

Specifies the property and display value of the collection of column.

• []

{% highlight html %}

<ej-heatmap id="heatmap1" [itemsMapping]="itemsMapping">

{% endhighlight %}

{% highlight ts %}

this.itemsMapping = { columnMapping: [ { "propertyName": "property name1", "displayName": "display name1" }, { "propertyName": "property name2", "displayName": "display name2" } ] };

{% endhighlight %}

{:#members:colormappingcollection}

Specifies the color values of the heat map column data.

• []

{% highlight html %}

{% endhighlight %}

{:#members:colormappingcollection-color}

Specifies the color of the heat map column data.

• "white"

{% highlight html %}

{% endhighlight %}

{:#members:colormappingcollection-value}

Specifies the color values of the heat map column data.

• 0

{% highlight html %}

{% endhighlight %}

{:#members:colormappingcollection-label}

Specifies the label properties of the heat map color.

• null

{% highlight html %}

{% endhighlight %}

{:#members:colormappingcollection-label-bold}

Enables/disables the bold style of the heat map label.

• false

{% highlight ts %}

this.label = { 'text': '0' ,'bold': true};

{% endhighlight %}

{:#members:colormappingcollection-label-italic}

Enables/disables the italic style of the heat map label.

• false

{% highlight ts %}

this.label = { 'text': '0' ,'italic': true};

{% endhighlight %}

{:#members:colormappingcollection-label-text}

specifies the text value of the heat map label.

• ""

{% highlight ts %}

this.label = { 'text': '10' };

{% endhighlight %}

{:#members:colormappingcollection-label-textdecoration}

Specifies the text style of the heat map label.

• ej.HeatMap.TextDecoration.None

{% highlight ts %}

this.label = { 'textDecoration': ej.HeatMap.TextDecoration.None };

{% endhighlight %}

{:#members:colormappingcollection-label-fontsize}

Specifies the font size of the heat map label.

• 10

{% highlight ts %}

this.label = { 'fontSize': 18 };

{% endhighlight %}

{:#members:colormappingcollection-label-fontfamily}

Specifies the font family of the heat map label.

• "Arial"

{% highlight ts %}

this.label = { 'fontFamily': "Arial" };

{% endhighlight %}

{:#members:colormappingcollection-label-fontcolor}

Specifies the font color of the heat map label.

• "black"

{% highlight ts %}

this.label = { 'fontColor': "red" };

{% endhighlight %}

{:#events:cellmouseover}

Triggered when the mouse over on the cell.

{% highlight html %}

<ej-heatmap id="heatmap1" (cellMouseOver) ="cellMouseOver($event)">

{% endhighlight %}

{% highlight ts %}

//cellMouseOver event for heatmap cellMouseOver(args:any){ //doSomething. }

{% endhighlight %}

{:#events:cellmouseenter}

Triggered when the mouse over on the cell.

{% highlight html %}

<ej-heatmap id="heatmap1" (cellMouseEnter) ="cellMouseEnter($event)">

{% endhighlight %}

{% highlight ts %}

//cellMouseEnter event for heatmap cellMouseEnter(args:any){ //doSomething. }

{% endhighlight %}

{:#events:cellmouseleave}

Triggered when the mouse over on the cell.

{% highlight html %}

<ej-heatmap id="heatmap1" (cellMouseLeave) ="cellMouseLeave($event)">

{% endhighlight %}

{% highlight ts %}

//cellMouseLeave event for heatmap cellMouseLeave(args:any){ //doSomething. }

{% endhighlight %}

{:#events:cellselected}

Triggered when the mouse over on the cell.

{% highlight html %}

<ej-heatmap id="heatmap1" (cellSelected) ="cellSelected($event)">

{% endhighlight %}

{% highlight ts %}

//cellSelected event for heatmap cellSelected(args:any){ //doSomething. }

{% endhighlight %}