Represents the Vue HeatMap component. This is used to customize the properties of the heatmap in order to visualize two-dimensional data, with values represented by gradient or solid color variations.
<ejs-heatmap></ejs-heatmap> boolean
Enable or disable the selection of cells in heatmap.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :allowSelection='allowSelection'></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']
},
allowSelection: true
}
},
provide:{
heatmap:[Tooltip, Legend]
},
}
</script>Defaults to false
string
Specifies the background color of the entire heatmap.
Defaults to null
Sets and gets the options to customize the heatmap cells.
<template>
<div class="control_wrapper">
<ejs-heatmap id="heatmap" :dataSource='dataSource' :titleSettings='titleSettings' :legendSettings='legendSettings' :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 {
cellSettings: {
showLabel: false,
},
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
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]
],
legendSettings: {
visible:true,
position: 'Right',
showLabel: true,
height: "150"
}
}
},
provide:{
heatmap:[Tooltip, Legend]
},
}
</script> Object
Sets and gets the data to visualize in the heatmap.
Defaults to null
Sets and gets the options to customize the data mapping for the data in the heatmap.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :dataSourceSettings='dataSourceSettings' :cellSettings='cellSettings'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend, Adaptor } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[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: {
adaptorType: 'Cell'
},
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'],
},
}
},
provide:{
heatmap:[Tooltip, Legend, Adaptor]
}
}
</script> boolean
Enable or disable the multiple selection of cells in heatmap.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
string
Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format.
Defaults to null
Sets and gets the options for customizing the legend of the heatmap.
<template>
<div class="control_wrapper">
<ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis' :titleSettings='titleSettings' :legendSettings='legendSettings'></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 {
xAxis: {
labels: ['Nancy', 'Andrew','Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis:{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
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]
],
legendSettings: {
visible:true,
position: 'Right',
showLabel: true,
height: "150"
}
}
},
provide:{
heatmap:[Tooltip, Legend]
},
}
</script> string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
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.
Defaults to SVG
boolean
Enable or disable the visibility of the tooltip for heatmap.
Defaults to true
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.
Defaults to ‘Material’
Sets and gets the options to customize the title of the heatmap.
<template>
<div class="control_wrapper">
<ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis' :titleSettings='titleSettings'></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 {
xAxis: {
labels: ['Nancy', 'Andrew','Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
},
yAxis:{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
},
titleSettings: {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
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]
]
}
},
provide:{
heatmap:[Tooltip, Legend]
},
}
</script>Sets and gets the options for customizing the tooltip of the heatmap.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings' :showTooltip='showTooltip' :tooltipSettings='tooltipSettings'></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: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',
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'],
},
cellSettings: {
showLabel: true,
},
tooltipSettings: {
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
},
showTooltip: true
}
},
provide:{
heatmap:[Tooltip, Legend]
},
}
</script> 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.
Defaults to null
Sets and gets the options to configure the horizontal axis.
Sets and gets the options to configure the vertical axis.
This method is used to clear the cell selection in the heatmap.
<template>
<div id="app">
<ejs-heatmap id="heatmap" ref="heatmaps" :titleSettings="titleSettings" :allowSelection='allowSelection' :dataSource="dataSource"
></ejs-heatmap>
<div>
<ejs-button v-on:click.native="btnClick">Clear Selection</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { HeatMapPlugin, Tooltip, Legend } from "@syncfusion/ej2-vue-heatmap";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(HeatMapPlugin);
Vue.use(ButtonPlugin);
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"
}
},
allowSelection: true
};
},
provide: {
heatmap: [Tooltip, Legend]
},
methods: {
btnClick: function () {
this.$refs.heatmaps.ej2Instances.clearSelection();
}
}
};
</script>Returns void
This method destroys the heatmap. This method removes the events associated with the heatmap and disposes the objects created for rendering and updating the heatmap.
<template>
<div id="app">
<ejs-heatmap id="heatmap" ref="heatmaps" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
></ejs-heatmap>
<div>
<ejs-button v-on:click.native="BtnClick">Destroy</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { HeatMapPlugin, Tooltip, Legend } from "@syncfusion/ej2-vue-heatmap";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(HeatMapPlugin);
Vue.use(ButtonPlugin);
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: {
BtnClick: function () {
this.$refs.heatmaps.ej2Instances.destroy();
}
}
};
</script>Returns void
This method is used to perform the export functionality for the heatmap.
| Parameter | Type | Description |
|---|---|---|
| type | ExportType |
Specifies the type of the exported file. |
| fileName | string |
Specifies the file name for the exported file. |
| orientation (optional) | PdfPageOrientation |
Specifies the orientation for the exported PDF document. |
Returns void
This method is used to print the rendered heatmap.
Returns void
Applies all the pending property changes and render the component again.
Returns void
Triggers when clicking on the heatmap cell.
Triggers before each heatmap cell renders.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings="titleSettings" :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"
}
},
};
},
provide: {
heatmap: [Tooltip, Legend]
},
methods: {
cellRender: function(args) {
args.displayText = args.value + "$";
}
}
};
</script>Triggers when heatmap cell gets selected.
EmitType<Object>
Triggers after heatmap is completely rendered.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings="titleSettings" :dataSource="dataSource" :legendRender="legendRender"
></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"
}
},
};
},
provide: {
heatmap: [Tooltip, Legend]
},
methods: {
legendRender: function(args) {
args.text = args.text +'k';
}
}
};
</script>Triggers before heatmap gets loaded.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings="titleSettings" :load='load' :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"
}
}
};
},
provide: {
heatmap: [Tooltip, Legend]
},
methods: {
load: function(args) {
alert('Heatmap loaded successfully');
}
}
};
</script>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.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings' :showTooltip='showTooltip' :tooltipSettings='tooltipSettings' :tooltipRender='tooltipRender'></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: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
cellSettings: {
showLabel: true,
},
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'],
},
tooltipSettings: {
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
},
showTooltip: true
}
},
provide:{
heatmap:[Tooltip, Legend]
},
methods: {
tooltipRender: function(args){
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
}
}
}
</script>