Ej1 api migration in Angular Heatmap chart component
4 Apr 20234 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%">`
|
Property: width`<ejs-heatmap id='container' [width]='width'>`</ejs-heatmap>`
|
Specifies the height of the heat map |
Property: height`<ej-heatmap id="HeatMap" [height]="100%">`
|
Property: height`<ejs-heatmap id='container' [height]='height'>`
|
Enables or disables tooltip of heat map |
Property: showtooltip`<ej-heatmap id="HeatMap" [showTooltip]="true">`
|
Property: showTooltip`<ejs-heatmap id='container' [showTooltip]='showTooltip'>`
|
Defines the tooltip that should be shown when the mouse hovers over cells. |
Property: toolTipSettings.templateId`<ej-heatmap id="HeatMap" [toolTipSettings]="toolTipSettings">`
|
Property: tooltipRender`<ejs-heatmap id='container' (tooltipRender)='tooltipRender($event)'>`
|
Specifies the source data of the heat map. |
Property: itemsSource`<ej-heatmap id="HeatMap" [itemsSource]="itemsSource">`
|
Property: dataSource`<ejs-heatmap id='container' [dataSource]='dataSource'>`
|
Specifies whether the cell content can be visible or not. |
Property: heatmapCell.showContent`<ej-heatmap id="HeatMap" [heatmapCell]="heatmapCell">`
|
Property: cellSettings.showLabel `<ejs-heatmap id='container' [cellSettings]='cellSettings'>`
|
Specifies the color of the heat map column data. |
Property: colorMappingCollection.color`
|
Property: paletteSettings.palette.color`<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>`
|
Specifies the color values of the heat map column data. |
Property: colorMappingCollection.value`
|
Property: paletteSettings.palette.value`<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>`
|
Specifies the label text of the heat map color. |
Property: colorMappingCollection.label.text`
|
Property: paletteSettings.palette.label`<ejs-heatmap id='container' [paletteSettings]='paletteSettings'>`
|
Specifies the style of the heat map color label. |
Property: colorMappingCollection.label.bold Property: colorMappingCollection.label.italic`
|
Property: legendSettings.textStyle.fontStyle`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
|
Specifies the font size of the heat map label. |
Property: colorMappingCollection.label.fontSize`
|
Property: legendSettings.textStyle.size`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
|
Specifies the font family of the heat map label. |
Property: colorMappingCollection.label.fontFamily`
|
Property: legendSettings.textStyle.fontFamily`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
|
Specifies the font color of the heat map label. |
Property: colorMappingCollection.label.fontColor`
|
Property: legendSettings.textStyle.fontFamily`<ejs-heatmap id='container' [legendSettings]='legendSettings'>`
|
Specifies the mapping name of the column. |
Property: itemsMapping.column.propertyName`<ej-heatmap [itemsMapping]="itemsMapping">`
|
Property: dataSource.yDataMapping`<ejs-heatmap id='container' [dataSource]='dataSource'>`
|
Specifies the mapping name of the row. |
Property: itemsMapping.row.propertyName`<ej-heatmap [itemsMapping]="itemsMapping">`
|
Property: dataSource.xDataMapping`<ejs-heatmap id='container' [dataSource]='dataSource'>`
|
Specifies the mapping name of the row.</b> |
Property: itemsMapping.value.displayName`<ej-heatmap [itemsMapping]="itemsMapping">`
|
Property: dataSource.valueMapping`<ejs-heatmap id='container' [dataSource]='dataSource'>`
|
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)">`
|
Property: cellClick`<ejs-heatmap id='container' (cellClick)='cellClick($event)'>`
|