This article describes the API migration process of heat map component from Essential JS 1 to Essential JS 2.
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Specifies the width of the heat map |
Property:width
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
width: "300"
});
|
Property:width
let heatmap: HeatMap = new HeatMap({
width: '650px'
});
heatmap.appendTo('#heatmap');
|
| Specifies the height of the heat map |
Property:height
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
height: "300"
});
|
Property:height
let heatmap: HeatMap = new HeatMap({
height: '650px'
});
heatmap.appendTo('#heatmap');
|
| Enables or disables tooltip of heat map |
Property:showtooltip
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
showtooltip: true
});
|
Property:showTooltip
let heatmap: HeatMap = new HeatMap({
showTooltip: true
});
heatmap.appendTo('#heatmap');
|
| Defines the tooltip that should be shown when the mouse hovers over cells. |
Property:toolTipSettings.templateId
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
toolTipSettings: {
templateId:"mouseovertoolTipId"
}
});
|
Property:tooltipRender
let heatmap: HeatMap = new HeatMap({
tooltipRender: (args: ITooltipEventArgs) => {
args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value ];
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the source data of the heat map. |
Property:itemsSource
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
itemsSource: []
});
|
Property:dataSource
let heatmap: HeatMap = new HeatMap({
dataSource: []
});
heatmap.appendTo('#heatmap');
|
| Specifies whether the cell content can be visible or not. |
Property:heatmapCell.showContent
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
heatmapCell: { showContent: ej.HeatMap.CellVisibility.Hidden }
});
|
Property:cellSettings.showLabel
let heatmap: HeatMap = new HeatMap({
cellSettings: {
showLabel: false
},
});
heatmap.appendTo('#heatmap');
|
| Specifies the color of the heat map column data. |
Property:colorMappingCollection.color
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ color: "#8ec8f8" },
{ color: "#0d47a1" }
]
});
|
Property:paletteSettings.palette.color
let heatmap: HeatMap = new HeatMap({
paletteSettings: {
palette: [
{ color: '#C06C84'},
]
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the color values of the heat map column data. |
Property:colorMappingCollection.value
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ value: 0 },
{ value: 100 }
]
});
|
Property:paletteSettings.palette.value
let heatmap: HeatMap = new HeatMap({
paletteSettings: {
palette: [
{ value: 50 },
{ value: 100 }
]
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the label text of the heat map color. |
Property:colorMappingCollection.label.text
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ label: { text: "Low" } },
{ label: { text: "Moderate" } }
]
});
|
Property:paletteSettings.palette.label
let heatmap: HeatMap = new HeatMap({
paletteSettings: {
palette: [
{ label:'Low' },
{ label:'Moderate' }
]
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the style of the heat map color label. |
Property:colorMappingCollection.label.bold
Property:colorMappingCollection.label.italic
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ label: { bold: true } },
{ label: { italic: true } },
]
});
|
Property:legendSettings.textStyle.fontStyle
let heatmap: HeatMap = new HeatMap({
legendSettings: {
textStyle: { fontStyle:'bold' }
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the font size of the heat map label. |
Property:colorMappingCollection.label.fontSize
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ label: { fontSize: 18 } }
]
});
|
Property:legendSettings.textStyle.size
let heatmap: HeatMap = new HeatMap({
legendSettings: {
textStyle: { size: 18 }
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the font family of the heat map label. |
Property:colorMappingCollection.label.fontFamily
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ label: { fontFamily: "Arial" } }
]
});
|
Property:legendSettings.textStyle.fontFamily
let heatmap: HeatMap = new HeatMap({
legendSettings: {
textStyle: { fontFamily: 'Arial' }
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the font color of the heat map label. |
Property:colorMappingCollection.label.fontColor
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
colorMappingCollection: [
{ label: { fontColor: "red" } }
]
});
|
Property:legendSettings.textStyle.fontFamily
let heatmap: HeatMap = new HeatMap({
legendSettings: {
textStyle: { color: 'red' }
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the mapping name of the column. |
Property:itemsMapping.column.propertyName
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
itemsMapping: {
column: { "propertyName": "ProductName" }
}
});
|
Property:dataSource.yDataMapping
let heatmap: HeatMap = new HeatMap({
dataSource: heatmapData,
dataSourceSettings: {
yDataMapping: 'columnid'
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the mapping name of the row. |
Property:itemsMapping.row.propertyName
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
itemsMapping: {
row: { "displayName": "Product Name" }
}
});
|
Property:dataSource.xDataMapping
let heatmap: HeatMap = new HeatMap({
dataSource: heatmapData,
dataSourceSettings: {
xDataMapping: 'rowid'
}
});
heatmap.appendTo('#heatmap');
|
| Specifies the mapping name of the row. |
Property:itemsMapping.value.displayName
var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{
itemsMapping: {
value: { "displayName": "Product Name" }
}
});
|
Property:dataSource.valueMapping
let heatmap: HeatMap = new HeatMap({
dataSource: heatmapData,
dataSourceSettings: {
valueMapping: 'value'
}
});
heatmap.appendTo('#heatmap');
|