HeatMapModel
23 Sep 202524 minutes to read
Interface for a class HeatMap
Properties
cellClick EmitType<ICellClickEventArgs>
Triggers when clicking on the heatmap cell.
cellDoubleClick EmitType<ICellClickEventArgs>
Triggers when performing the double click operation on the cells in the HeatMap.
cellRender EmitType<ICellEventArgs>
Triggers before each heatmap cell renders.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' (cellRender)='cellRender($event)'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
import { ICellEventArgs } from '@syncfusion/ej2-angular-heatmap';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
public cellRender(args: ICellEventArgs): void {
args.displayText = '$ ' + (args.value as number / 2) + 'K';
};
}cellSelected EmitType<ISelectedEventArgs>
Triggers when heatmap cell gets selected.
created EmitType<Object>
Triggers after heatmap is completely rendered.
legendRender EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' (legendRender)='legendRender($event)'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
import { ILegendRenderEventArgs, HeatMap, Legend } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Legend);
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
public legendRender(args: ILegendRenderEventArgs): void {
args.text = args.text +'k';
};
}load EmitType<ILoadedEventArgs>
Triggers before heatmap gets loaded.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' (load)='load($event)'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
import { ILoadedEventArgs } from '@syncfusion/ej2-angular-heatmap';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
public load(args: ILoadedEventArgs): void {
alert('HeatMap loaded successfully');
};
}loaded EmitType<ILoadedEventArgs>
Triggers after heatmap is loaded.
resized EmitType<IResizeEventArgs>
Triggers to notify the resize of the heatmap when the window is resized.
tooltipRender EmitType<ITooltipEventArgs>
Triggers before the tooltip of the heatmap is rendered on the heatmap cell.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' (tooltipRender)='tooltipRender($event)'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, ITooltipEventArgs } from '@syncfusion/ej2-angular-heatmap';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
public tooltipRender(args: ITooltipEventArgs): void {
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
};
}allowSelection boolean
Enable or disable the selection of cells in heatmap.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' [allowSelection]='allowSelection'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
allowSelection: boolean = true;
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79]
];
}backgroundColor string
Specifies the background color of the entire heatmap.
cellSettings CellSettingsModel
Sets and gets the options to customize the heatmap cells.
<ejs-heatmap id='container' style="display:block;" [cellSettings]='cellSettings' [dataSource]='dataSource'>
</ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79]
];
public cellSettings: Object = {
showLabel: false
};
}dataSource Object
Sets and gets the data to visualize in the heatmap.
dataSourceSettings DataModel
Sets and gets the options to customize the data mapping for the data in the heatmap.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' [dataSourceSettings]='dataSourceSettings'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[0, 0, 10.75], [0, 1, 14.5], [0, 2, 25.5], [0, 3, 39.5], [0, 4, 59.75], [0, 5, 35.50], [0, 6, 75.5],
[1, 0, 20.75], [1, 1, 35.5], [1, 2, 29.5], [1, 3, 75.5], [1, 4, 80], [1, 5, 65], [1, 6, 85],
[2, 0, 6], [2, 1, 18.5], [2, 2, 30.05], [2, 3, 35.5], [2, 4, 40.75], [2, 5, 50.75], [2, 6, 65],
[3, 0, 30.5], [3, 1, 20.5], [3, 2, 45.30], [3, 3, 50], [3, 4, 55], [3, 5, 85.80], [3, 6, 87.5],
[4, 0, 10.5], [4, 1, 20.75], [4, 2, 35.5], [4, 3, 35.5], [4, 4, 45.5], [4, 5, 65.], [4, 6, 75.5],
[5, 0, 45.5], [5, 1, 20.75], [5, 2, 45.5], [5, 3, 50.75], [5, 4, 79.30], [5, 5, 84.20], [5, 6, 87.36],
[6, 0, 26.82], [6, 1, 70], [6, 2, 75], [6, 3, 79.5], [6, 4, 88.5], [6, 5, 89.5], [6, 6, 91.75],
];
dataSourceSettings: Object = {
adaptorType: 'Cell'
};
}enableHtmlSanitizer boolean
Specifies whether to enable the rendering of untrusted HTML values in the HeatMap. If enableHtmlSanitizer set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
enableMultiSelect boolean
Enable or disable the multiple selection of cells in heatmap.
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
enableRtl boolean
Enable or disable rendering component in right to left direction.
height string
Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format.
legendSettings LegendSettingsModel
Sets and gets the options for customizing the legend of the heatmap.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' [legendSettings]='legendSettings'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Legend } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Legend);
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
];
public legendSettings: Object = {
position: 'Top',
};
}locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
margin MarginModel
Sets and gets the options to customize left, right, top and bottom margins of the heatmap.
paletteSettings PaletteSettingsModel
Sets and gets the options for customizing the cell color of the heatmap.
renderingMode DrawType
Specifies the rendering mode of heatmap. The following are the available rendering modes.
- SVG - Heatmap is rendered using SVG element.
- Canvas - Heatmap is rendered using Canvas element.
- Auto - Automatically switches the rendering mode based on number of records in the data source.
showTooltip boolean
Enable or disable the visibility of the tooltip for heatmap.
theme HeatMapTheme
Sets and gets the theme styles supported for heatmap. When the theme is set, the styles associated with the theme will be set in the heatmap.
titleSettings TitleModel
Sets and gets the options to customize the title of the heatmap.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' [titleSettings]='titleSettings'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Italic',
fontFamily: 'Courier New'
}
};
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
}tooltipSettings TooltipSettingsModel
Sets and gets the options for customizing the tooltip of the heatmap.
<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' [tooltipSettings]='tooltipSettings'></ejs-heatmap> import { Component, ViewEncapsulation } from '@angular/core';
/**
* HeatMap default sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public tooltipSettings: Object = {
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
};
dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
}width string
Sets and gets the width of the heatmap. The width of the heatmap accepts pixel or percentage values given in string format.
If specified as ‘100%, heatmap renders to the full width of its parent element.
xAxis AxisModel
Sets and gets the options to configure the horizontal axis.
yAxis AxisModel
Sets and gets the options to configure the vertical axis.