Interface for a class HeatMap
Triggers when clicking on the heatmap cell.
Triggers before each heatmap cell renders.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme, ICellEventArgs } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Italic',
fontFamily: 'Courier New'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
cellSettings: {
showLabel: true,
},
tooltipSettings: {
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
},
cellRender: (args: ICellEventArgs) => {
args.displayText = '$ ' + (args.value / 2) + 'K';
},
dataSource: heatmapData,
});
heatmap.appendTo('#container');Triggers when heatmap cell gets selected.
EmitType<Object>
Triggers after heatmap is completely rendered.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme, ILegendRenderEventArgs } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
allowSelection: true,
legendRender: (args: ILegendRenderEventArgs) => {
args.text = args.text +'k';
},
dataSource: heatmapData,
});
heatmap.appendTo('#container');Triggers before heatmap gets loaded.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
allowSelection: true,
load: (args: ILoadedEventArgs) => {
alert('Heatmap rendered successfully');
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.heatmap.theme = <HeatMapTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
},
dataSource: heatmapData,
});
heatmap.appendTo('#container');Triggers after heatmap is loaded.
Triggers to notify the resize of the heatmap when the window is resized.
Triggers before the tooltip of the heatmap is rendered on the heatmap cell.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme, ITooltipEventArgs } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
allowSelection: true,
tooltipRender: (args: ITooltipEventArgs) => {
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
},
dataSource: heatmapData,
});
heatmap.appendTo('#container'); boolean
Enable or disable the selection of cells in heatmap.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
allowSelection: true,
dataSource: heatmapData,
});
heatmap.appendTo('#container'); string
Specifies the background color of the entire heatmap.
Sets and gets the options to customize the heatmap cells.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
cellSettings: {
showLabel: false,
border: {
width: 0,
},
format: '{value} rates'
},
allowSelection: true,
dataSource: heatmapData,
});
heatmap.appendTo('#container'); Object
Sets and gets the data to visualize in the heatmap.
Sets and gets the options to customize the data mapping for the data in the heatmap.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Olympic Medal Achievements of most Successful Countries',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['China', 'France', 'GBR', 'Germany', 'Italy', 'Japan', 'KOR', 'Russia', 'USA'],
labelRotation: 45,
labelIntersectAction: 'None',
},
yAxis: {
title : {text: 'Olympic Year'},
labels: ['2000', '2004', '2008', '2012', '2016'],
},
dataSource: heatmapData,
dataSourceSettings: {
isJsonData: true,
adaptorType: 'Table',
xDataMapping: 'Region',
}, paletteSettings: {
palette: [{ color: '#F0C27B' },
{ color: '#4B1248' }
],
},
cellSettings: {
border: {
width: 1,
radius: 4,
color: 'white'
}
},
});
heatmap.appendTo('#container'); boolean
Enable or disable the multiple selection of cells in heatmap.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
string
Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format.
Sets and gets the options for customizing the legend of the heatmap.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
cellSettings: {
showLabel: false,
},
paletteSettings: {
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 80, color: '#206974' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
],
},
dataSource: heatmapData,
legendSettings: {
position: 'Top',
}
});
heatmap.appendTo('#container'); string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Sets and gets the options to customize left, right, top and bottom margins of the heatmap.
Sets and gets the options for customizing the cell color of the heatmap.
Specifies the rendering mode of heatmap. The following are the available rendering modes.
boolean
Enable or disable the visibility of the tooltip for heatmap.
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.
Sets and gets the options to customize the title of the heatmap.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Italic',
fontFamily: 'Courier New'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
cellSettings: {
showLabel: false,
},
dataSource: heatmapData,
});
heatmap.appendTo('#container');Sets and gets the options for customizing the tooltip of the heatmap.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container"> </div>
</body>
</html> import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);
/**
* Sample for Line serie
*/
let heatmapData: any[] = [
[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]
];
let heatmap: HeatMap = new HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Italic',
fontFamily: 'Courier New'
}
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
cellSettings: {
showLabel: false,
},
tooltipSettings: {
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
},
dataSource: heatmapData,
});
heatmap.appendTo('#container'); 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.
Sets and gets the options to configure the horizontal axis.
Sets and gets the options to configure the vertical axis.