Ej1 api migration in Angular Heatmap chart component

5 Apr 20254 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

`<ej-heatmap id="HeatMap" [width]="100%">`
`</ej-heatmap>` 		Property: width

`<ejs-heatmap id='container' [width]='width'>`</ejs-heatmap>`

this.width = '300'
Specifies the height of the heat map Property: height

`<ej-heatmap id="HeatMap" [height]="100%">`
`</ej-heatmap>` 		Property: height

`<ejs-heatmap id='container' [height]='height'>`
`</ejs-heatmap>`

this.height = '300'
Enables or disables tooltip of heat map Property: showtooltip

`<ej-heatmap id="HeatMap" [showTooltip]="true">`
`</ej-heatmap>` 		Property: showTooltip

`<ejs-heatmap id='container' [showTooltip]='showTooltip'>`
`</ejs-heatmap>`

this.showTooltip = true
Defines the tooltip that should be shown when the mouse hovers over cells. Property: toolTipSettings.templateId

`<ej-heatmap id="HeatMap" [toolTipSettings]="toolTipSettings">`
`</ej-heatmap>`

this.toolTipSettings = {templateId:"mouseovertoolTipId"} 		Property: tooltipRender

`<ejs-heatmap id='container' (tooltipRender)='tooltipRender($event)'>`
`</ejs-heatmap>`

this.tooltipRender = function(args) {};
Specifies the source data of the heat map. Property: itemsSource

`<ej-heatmap id="HeatMap" [itemsSource]="itemsSource">`
`</ej-heatmap>`

this.itemsSource = [] 		Property: dataSource

`<ejs-heatmap id='container' [dataSource]='dataSource'>`
`</ejs-heatmap>`

this.dataSource = []
Specifies whether the cell content can be visible or not. Property: heatmapCell.showContent

`<ej-heatmap id="HeatMap" [heatmapCell]="heatmapCell">`
`</ej-heatmap>`

this.heatmapCell = { showContent: "Hidden" } 		Property: cellSettings.showLabel

`<ejs-heatmap id='container' [cellSettings]='cellSettings'>`
`</ejs-heatmap>`

this.cellSettings = {showLabel: false}
Specifies the color of the heat map column data. Property: colorMappingCollection.color

``
``
`<e-colormapping color"#8ec8f8"></e-colormapping>`
`<e-colormapping color"#0d47a1"></e-colormapping>`
``
`` 		Property: paletteSettings.palette.color

`<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>`
`</ejs-heatmap>`

this.paletteSettings = {palette: [{ color: '#C06C84'},]}
Specifies the color values of the heat map column data. Property: colorMappingCollection.value

``
``
`<e-colormapping [value]="0"></e-colormapping>`
`<e-colormapping [value]="100"></e-colormapping>`
``
`` 		Property: paletteSettings.palette.value

`<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>`
`</ejs-heatmap>`

this.paletteSettings = {palette: [{ value: 50},]}
Specifies the label text of the heat map color. Property: colorMappingCollection.label.text

``
``
`<e-colormapping [label]="label">`
`</e-colormapping>`
``
``

this.label = { text: "Moderate" } 		Property: paletteSettings.palette.label

`<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>`
`</ejs-heatmap>`

this.paletteSettings = {palette: [{ label:'Low' },{ label:'Moderate' }]}
Specifies the style of the heat map color label. Property: colorMappingCollection.label.bold Property: colorMappingCollection.label.italic

``
`<e-colormapping [label]="labelBold">`
`</e-colormapping>`
`<e-colormapping [label]="labelItalic">`
`</e-colormapping>`
``
``

this.labelBold = { bold: true }
this.labelItalic = { italic: true } 		Property: legendSettings.textStyle.fontStyle

`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
`</ejs-heatmap>`

this.legendSettings = {textStyle: { fontStyle:'bold' }}
Specifies the font size of the heat map label. Property: colorMappingCollection.label.fontSize

``
``
`<e-colormapping [label]="label">`
`</e-colormapping>`
``
``

this.label = { fontSize: 18 } 		Property: legendSettings.textStyle.size

`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
`</ejs-heatmap>`

this.legendSettings = {textStyle: { size: 18 }}
Specifies the font family of the heat map label. Property: colorMappingCollection.label.fontFamily

``
``
`<e-colormapping [label]="label">`
`</e-colormapping>`
``
``

this.label = { fontFamily: "Arial" } 		Property: legendSettings.textStyle.fontFamily

`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
`</ejs-heatmap>`

this.legendSettings = {textStyle: { fontFamily: 'Arial' }}
Specifies the font color of the heat map label. Property: colorMappingCollection.label.fontColor

``
``
`<e-colormapping [label]="label">`
`</e-colormapping>`
``
``

this.label = { fontColor: "red" } 		Property: legendSettings.textStyle.fontFamily

`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
`</ejs-heatmap>`

this.legendSettings = {textStyle: { color: 'red' }}
Specifies the mapping name of the column. Property: itemsMapping.column.propertyName

`<ej-heatmap [itemsMapping]="itemsMapping">`
`</ej-heatmap>`

this.itemsMapping = {column: { "propertyName": "ProductName" }} 		Property: dataSource.yDataMapping

`<ejs-heatmap id='container' [dataSource]='dataSource'>`
`</ejs-heatmap>`

this.dataSource = {data: heatmapData,yDataMapping: 'columnid'}
Specifies the mapping name of the row. Property: itemsMapping.row.propertyName

`<ej-heatmap [itemsMapping]="itemsMapping">`
`</ej-heatmap>`

this.itemsMapping = {row: { "displayName": "Product Name" }} 		Property: dataSource.xDataMapping

`<ejs-heatmap id='container' [dataSource]='dataSource'>`
`</ejs-heatmap>`

this.dataSource = {data: heatmapData,xDataMapping: 'rowid'}
Specifies the mapping name of the row.</b> Property: itemsMapping.value.displayName

`<ej-heatmap [itemsMapping]="itemsMapping">`
`</ej-heatmap>`

this.itemsMapping = {value: { "displayName": "Product Name" }} 		Property: dataSource.valueMapping

`<ejs-heatmap id='container' [dataSource]='dataSource'>`
`</ejs-heatmap>`

this.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

`<ej-heatmap (actionComplete)="actionComplete($event)">`
`</ej-heatmap>`

this.actionComplete = function(args) {} 		Property: cellClick

`<ejs-heatmap id='container' (cellClick)='cellClick($event)'>`
`</ejs-heatmap>`

this.cellClick = function(args) {}