You can customize the cell by using the cellSettings
property.
Change the width, color, and radius of the heat map cells by using the border
property.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
cellSettings: {
border: {
width: 1,
radius: 4,
color: 'white'
}
},
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Enable or disable the cell highlighting while hover over the heat map cells by using the enableCellHighlighting
property.
Note: The cell highlighting only works in a SVG rendering mode.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
cellSettings: {
enableCellHighlighting: true
},
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Set the margin for the heat map from its container by using the margin
property.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
margin: { left: 40, right: 40, top: 40, bottom: 40 },
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
The title is used to provide a quick information about the data plotted in heat map. The text
property is used to set the title for heat map. You can also customize text style of a title by using the textStyle
property.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Italic',
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'],
},
dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can toggle the visibility of data labels by using the showLabel
property . By default, the data label will be visible.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
cellSettings: {
showLabel: false
},
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can customize the font family, font size, and color of the data label by using the textStyle
in the cellSettings
property.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
cellSettings: {
textStyle: {
fontStyle: 'Italic',
fontFamily: 'Segoe UI'
}
},
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can change the format of the data label, such as currency, decimal, percent etc. by using format
property.
var heatmapData = [
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
cellSettings: {
format: '{value}
</div>
<div></div>
</div>
</div>
}
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
In the HeatMap, you can customize the cell value using the cellRender
client-side event.
var heatmapData = [
[73, 39, 26, 39, 94, 1],
[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]];
var heatmap = new ej.heatmap.HeatMap({
titleSettings: {
text: 'Sales Revenue per Employee (in US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
dataSource: heatmapData,
cellRender: function (args) {
args.displayText = (args.value) + 'K';
},
});
heatmap.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 HeatMap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>