Selection in Vue Heatmap chart component
17 Mar 20239 minutes to read
In the HeatMap, the cell selection is used to select the single or multiple heat map cells at runtime and get the selected cell details using the cellSelected event. You can enable the cell selection using the allowSelection property.
<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>
<style>
@import 'https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Enable single cell selection
In the HeatMap, the enableMultiSelect property is used to allow single cell selection. When you set the enableMultiSelect
property to false, only one cell is selected. By default, enableMultiSelect
property is set to true.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :allowSelection='allowSelection'
:enableMultiSelect='enableMultiSelect'></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]
],
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,
enableMultiSelect: false
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>