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’}
|