Selection in Vue HeatMap chart component

13 Jun 202424 minutes to read

In the HeatMap, the cell selection is used to select single or multiple HeatMap cells at runtime and get the selected cell details using the cellSelected event. You can enable the cell selection using the allowSelection property.

The HeatMap cells can be selected using the following interactions, as shown in the table below.

Modes of Interactions Description
Mouse HeatMap cells can be selected by clicking or dragging and dropping over them.
Touch HeatMap cells can be selected by tapping or dragging and dropping over them.
Keyboard The Ctrl key on the keyboard can be used to enable multiple cell selection with mouse and touch interaction. The Ctrl key can only be used if the enableMultiSelect property is set to true in order to enable multiple cell selection. 
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :allowSelection='allowSelection'></ejs-heatmap>
    </div>
</template>
<script setup>

import { provide } from "vue";
import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


const 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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const allowSelection = true;

provide('heatmap', [Tooltip, Legend])
</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :allowSelection='allowSelection'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    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>

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 setup>

import { HeatMapComponent as EjsHeatmap } from '@syncfusion/ej2-vue-heatmap';

const 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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const allowSelection = true;
const enableMultiSelect = false;

</script>
<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 { HeatMapComponent } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },

    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>

Clearing cell selection

The clearSelection method can be used to clear all the selected cells. The below example illustrates the same.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" ref="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
            :dataSource='dataSource' :allowSelection='allowSelection'>
        </ejs-heatmap>
        <button id='selection' v-on:click='clearSelection'>Clear Selection</button>
    </div>
</template>
<script setup>

import { provide, ref } from "vue";
import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


const heatmap = ref(null);

const 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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const allowSelection = true;


const clearSelection = () => {
    heatmap.value.ej2Instances.clearSelection();
}

provide('heatmap', [Tooltip, Legend])
</script>
<template>
    <div id="app">
      <ejs-heatmap id="heatmap" ref="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
        :dataSource='dataSource' :allowSelection='allowSelection'>
      </ejs-heatmap>
      <button id='selection' v-on:click='clearSelection'>Clear Selection</button>
    </div>
  </template>
  <script>
  
  import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
  
  
  export default {
    name: "App",
    components: {
      "ejs-heatmap": HeatMapComponent
    },
    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
      }
    },
    methods: {
      clearSelection: function () {
        this.$refs.heatmap.ej2Instances.clearSelection();
      }
    },
    provide: {
      heatmap: [Tooltip, Legend]
    }
  }
  </script>