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