Ej1 api migration in React Heatmap chart component

17 Mar 20255 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 } } ];
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'}

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