| Specifies the width of the heat map |
Property: width
<ej-heatmap id="HeatMap" [width]="100%">
</ej-heatmap> |
Property: width
<ejs-heatmap id='container' [width]='width'>`
this.width = ‘300’ |
| Specifies the height of the heat map |
Property: height
<ej-heatmap id="HeatMap" [height]="100%">
</ej-heatmap> |
Property: height
<ejs-heatmap id='container' [height]='height'>
</ejs-heatmap>
this.height = ‘300’ |
| Enables or disables tooltip of heat map |
Property: showtooltip
<ej-heatmap id="HeatMap" [showTooltip]="true">
</ej-heatmap> |
Property: showTooltip
<ejs-heatmap id='container' [showTooltip]='showTooltip'>
</ejs-heatmap>
this.showTooltip = true |
| Defines the tooltip that should be shown when the mouse hovers over cells. |
Property: toolTipSettings.templateId
<ej-heatmap id="HeatMap" [toolTipSettings]="toolTipSettings">
</ej-heatmap>
this.toolTipSettings = {templateId:“mouseovertoolTipId”} |
Property: tooltipRender
<ejs-heatmap id='container' (tooltipRender)='tooltipRender($event)'>
</ejs-heatmap>
this.tooltipRender = function(args) {}; |
| Specifies the source data of the heat map. |
Property: itemsSource
<ej-heatmap id="HeatMap" [itemsSource]="itemsSource">
</ej-heatmap>
this.itemsSource = [] |
Property: dataSource
<ejs-heatmap id='container' [dataSource]='dataSource'>
</ejs-heatmap>
this.dataSource = [] |
| Specifies whether the cell content can be visible or not. |
Property: heatmapCell.showContent
<ej-heatmap id="HeatMap" [heatmapCell]="heatmapCell">
</ej-heatmap>
this.heatmapCell = { showContent: “Hidden” } |
Property: cellSettings.showLabel
<ejs-heatmap id='container' [cellSettings]='cellSettings'>
</ejs-heatmap>
this.cellSettings = {showLabel: false} |
| Specifies the color of the heat map column data. |
Property: colorMappingCollection.color
<ej-heatmap>
<e-colormappingcollection>
<e-colormapping color"#8ec8f8"></e-colormapping>
<e-colormapping color"#0d47a1"></e-colormapping>
</e-colormappingcollection>
</ej-heatmap> |
Property: paletteSettings.palette.color
<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>
</ejs-heatmap>
this.paletteSettings = {palette: [{ color: ‘#C06C84’},]} |
| Specifies the color values of the heat map column data. |
Property: colorMappingCollection.value
<ej-heatmap>
<e-colormappingcollection>
<e-colormapping [value]="0"></e-colormapping>
<e-colormapping [value]="100"></e-colormapping>
</e-colormappingcollection>
</ej-heatmap> |
Property: paletteSettings.palette.value
<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>
</ejs-heatmap>
this.paletteSettings = {palette: [{ value: 50},]} |
| Specifies the label text of the heat map color. |
Property: colorMappingCollection.label.text
<ej-heatmap>
<e-colormappingcollection>
<e-colormapping [label]="label">
</e-colormapping>
</e-colormappingcollection>
</ej-heatmap>
this.label = { text: “Moderate” } |
Property: paletteSettings.palette.label
<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>
</ejs-heatmap>
this.paletteSettings = {palette: [{ label:‘Low’ },{ label:‘Moderate’ }]} |
| Specifies the style of the heat map color label. |
Property: colorMappingCollection.label.bold Property: colorMappingCollection.label.italic
<ej-heatmap><e-colormappingcollection>
<e-colormapping [label]="labelBold">
</e-colormapping>
<e-colormapping [label]="labelItalic">
</e-colormapping>
</e-colormappingcollection>
</ej-heatmap>
this.labelBold = { bold: true }
this.labelItalic = { italic: true } |
Property: legendSettings.textStyle.fontStyle
<ejs-heatmap id='container' [legendSettings]='legendSettings'>
</ejs-heatmap>
this.legendSettings = {textStyle: { fontStyle:‘bold’ }} |
| Specifies the font size of the heat map label. |
Property: colorMappingCollection.label.fontSize
<ej-heatmap>
<e-colormappingcollection>
<e-colormapping [label]="label">
</e-colormapping>
</e-colormappingcollection>
</ej-heatmap>
this.label = { fontSize: 18 } |
Property: legendSettings.textStyle.size
<ejs-heatmap id='container' [legendSettings]='legendSettings'>
</ejs-heatmap>
this.legendSettings = {textStyle: { size: 18 }} |
| Specifies the font family of the heat map label. |
Property: colorMappingCollection.label.fontFamily
<ej-heatmap>
<e-colormappingcollection>
<e-colormapping [label]="label">
</e-colormapping>
</e-colormappingcollection>
</ej-heatmap>
this.label = { fontFamily: “Arial” } |
Property: legendSettings.textStyle.fontFamily
<ejs-heatmap id='container' [legendSettings]='legendSettings'>
</ejs-heatmap>
this.legendSettings = {textStyle: { fontFamily: ‘Arial’ }} |
| Specifies the font color of the heat map label. |
Property: colorMappingCollection.label.fontColor
<ej-heatmap>
<e-colormappingcollection>
<e-colormapping [label]="label">
</e-colormapping>
</e-colormappingcollection>
</ej-heatmap>
this.label = { fontColor: “red” } |
Property: legendSettings.textStyle.fontFamily
<ejs-heatmap id='container' [legendSettings]='legendSettings'>
</ejs-heatmap>
this.legendSettings = {textStyle: { color: ‘red’ }} |
| Specifies the mapping name of the column. |
Property: itemsMapping.column.propertyName
<ej-heatmap [itemsMapping]="itemsMapping">
</ej-heatmap>
this.itemsMapping = {column: { “propertyName”: “ProductName” }} |
Property: dataSource.yDataMapping
<ejs-heatmap id='container' [dataSource]='dataSource'>
</ejs-heatmap>
this.dataSource = {data: heatmapData,yDataMapping: ‘columnid’} |
| Specifies the mapping name of the row. |
Property: itemsMapping.row.propertyName
<ej-heatmap [itemsMapping]="itemsMapping">
</ej-heatmap>
this.itemsMapping = {row: { “displayName”: “Product Name” }} |
Property: dataSource.xDataMapping
<ejs-heatmap id='container' [dataSource]='dataSource'>
</ejs-heatmap>
this.dataSource = {data: heatmapData,xDataMapping: ‘rowid’} |
| Specifies the mapping name of the row. |
Property: itemsMapping.value.displayName
<ej-heatmap [itemsMapping]="itemsMapping">
</ej-heatmap>
this.itemsMapping = {value: { “displayName”: “Product Name” }} |
Property: dataSource.valueMapping
<ejs-heatmap id='container' [dataSource]='dataSource'>
</ejs-heatmap>
this.dataSource = {data: heatmapData,valueMapping: ‘value’} |