| Specifies the width of the heat map |
Property: width
``
``
|
Property: width
`<HeatMapComponent id='heatmap-container' width={'300px'}>`</HeatMapComponent>`
|
| Specifies the height of the heat map |
Property: height
``
``
|
Property: height
`<HeatMapComponent id='heatmap-container' height={'300px'}>`
`</HeatMapComponent>`
|
| Enables or disables tooltip of heat map |
Property: showtooltip
``
``
|
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
``
``
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
``
``
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
``
``
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
``
``
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
``
``
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
``
``
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
``
``
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.</b> |
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'}
|