Ej1 api migration in React Heatmap chart component
27 Jan 20232 minutes to read
This article describes the API migration process of heat map component from Essential JS 1 to Essential JS 2.
Members
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| 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 } } ];
| **Property:** *legendSettings.textStyle.fontStyle*
colorMappingCollection = [ { label:{ italic: true } } ];`<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'}
|
Events
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Triggered when the cell get clicked.| Property: cellSelected`
`
actionComplete = function(args) {}
|**Property:** *cellClick*`<HeatMapComponent id='heatmap-container' cellClick={this.cellClick.bind(this)}>`
`</HeatMapComponent>`public cellClick(args: ICellClickEventArgs): void {}
|