Appearance in Vue Heatmap chart component
17 Mar 202324 minutes to read
Cell customization
You can customize the cell by using the cellSettings property.
Border
Change the width, color, and radius of the heat map cells by using the border property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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: {
border: {
width: 1,
radius: 4,
color: 'white'
}
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Cell highlighting
Enable or disable the cell highlighting while hovering over the heat map cells by using the enableCellHighlighting property.
Note: The cell highlighting only works in a SVG rendering mode.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
enableCellHighlighting: true
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Color gradient mode
The colorGradientMode property can be used to set the minimum and maximum values for colors based on row and column.
Three types of color gradient modes are available.
- Table: The minimum and maximum value colors calculated for overall data.
- Row: The minimum and maximum value colors calculated for each row of data.
- Column: The minimum and maximum value colors calculated for each column of data.
Note: The default value of
colorGradientMode
is Table.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :paletteSettings='paletteSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
enableCellHighlighting: true
},
paletteSettings: {
colorGradientMode: 'Column'
},
xAxis: {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
},
yAxis: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Background color
The background color of the HeatMap can be customized using the backgroundColor property.
<template>
<div id="app">
<ejs-heatmap
id="heatmap"
:backgroundColor="backgroundColor"
:titleSettings="titleSettings"
:xAxis="xAxis"
:yAxis="yAxis"
:dataSource="dataSource"
></ejs-heatmap>
</div>
</template>
<script>
import Vue from "vue";
import { HeatMapPlugin } from "@syncfusion/ej2-vue-heatmap";
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
backgroundColor: "#c7afcf",
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"]
}
};
}
};
</script>
Margin
Set the margin for the heatmap from its container by using the margin property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :margin='margin' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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']
},
margin: { left: 15, right: 15, top: 15, bottom: 15 }
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Title
The title is used to provide a quick information about the data plotted in heatmap. The text property is used to set the title for the heatmap. The text style of the title can be customized by using the textStyle property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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']
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Data label
The visibility of data labels can be toggled using the showLabel property. By default, the data labels will be visible.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Customize the data label
The label displayed in the HeatMap cell can be changed using the cellRender event.
<template>
<div id="app">
<ejs-heatmap
id="heatmap"
:titleSettings="titleSettings"
:xAxis="xAxis"
:yAxis="yAxis"
:dataSource="dataSource"
:cellRender="cellRender"
></ejs-heatmap>
</div>
</template>
<script>
import Vue from "vue";
import { HeatMapPlugin, Tooltip, Legend } from "@syncfusion/ej2-vue-heatmap";
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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"]
}
};
},
provide: {
heatmap: [Tooltip, Legend]
},
methods: {
cellRender: function(args) {
args.displayText = args.value + "$";
}
}
};
</script>
Text style
The text attributes of the data label such as font-family, font-size, and color can be customized using the textStyle in the cellSettings property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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: {
textStyle: {
fontStyle: 'Italic',
fontFamily: 'Segoe UI'
}
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Format
The format of the data label, such as currency, decimal, percent etc. can be changed using format property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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]
],
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: {
format: '${value}'
}
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>