Events in Vue HeatMap chart component

This section describes the HeatMap chart event, which occurs when the required actions are performed.

cellClick

When you click on a HeatMap cell, the cellClick event is triggered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :cellClick='cellClick'
      :dataSource='dataSource'></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 cellClick = () => {
  console.log("The cell click event has been triggered!!!");
};

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :cellClick='cellClick'
      :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    cellClick: function () {
      console.log("The cell click event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

cellDoubleClick

When you double click on a HeatMap cell, the cellDoubleClick event is triggered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
      :cellDoubleClick='cellDoubleClick' :dataSource='dataSource'></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 cellDoubleClick = () => {
  console.log("The cell double click event has been triggered!!!");
};
provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
      :cellDoubleClick='cellDoubleClick' :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    cellDoubleClick: function () {
      console.log("The cell double click event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

cellRender

The cellRender event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :cellRender='cellRender'
      :dataSource='dataSource'></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 cellRender = () => {
  console.log("The cell render event has been triggered!!!");
}

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :cellRender='cellRender'
      :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    cellRender: function () {
      console.log("The cell render event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

cellSelected

When single or multiple cells in the HeatMap are selected, the cellSelected event is triggered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :cellSelected='cellSelected'
      :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;


const cellSelected = () => {
  console.log("The cell selected event has been triggered!!!");
}

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :cellSelected='cellSelected'
      :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
    }
  },
  methods: {
    cellSelected: function () {
      console.log("The cell selected event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

created

Once HeatMap has been completely rendered, the created event is triggered.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :created='created'
      :dataSource='dataSource'>
    </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 created = () => {
  console.log("The created event has been triggered!!!");
};

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :created='created'
      :dataSource='dataSource'>
    </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']
      }
    }
  },
  methods: {
    created: function () {
      console.log("The created event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

legendRender

The legendRender event is triggered before the legend is rendered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :legendRender='legendRender'
      :dataSource='dataSource'></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 legendRender = () => {
  console.log("The legend render event has been triggered!!!");
}

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :legendRender='legendRender'
      :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    legendRender: function () {
      console.log("The legend render event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

load

The load event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :load='load'
      :dataSource='dataSource'></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 load = () => {
  console.log("The load event has been triggered!!!");
};

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :load='load'
      :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    load: function () {
      console.log("The load event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

loaded

Once HeatMap is loaded, the loaded event is triggered. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :loaded='loaded'
      :dataSource='dataSource'></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 loaded = () => {
  console.log("The loaded event has been triggered!!!");
};

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :loaded='loaded'
      :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    loaded: function () {
      console.log("The loaded event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>

resized

When the window is resized, the resized event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :resized='resized'
      :dataSource='dataSource'></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 resized = () => {
  console.log("The resized event has been triggered!!!");
}

provide('heatmap', [Legend, Tooltip]);
</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :resized='resized' :dataSource='dataSource'></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']
        }
    }
  },
  methods: {
    resized: function () {
      console.log("The resized event has been triggered!!!");
    }
  },
  provide:{
    heatmap: [Tooltip, Legend]
  }
}
</script>

tooltipRender

The tooltipRender event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer here.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
      :tooltipRender='tooltipRender' :dataSource='dataSource'></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 tooltipRender = () => {
  console.log("The tooltip render event has been triggered!!!");
}

provide('heatmap', [Tooltip, Legend]);
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
      :tooltipRender='tooltipRender' :dataSource='dataSource'></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']
      }
    }
  },
  methods: {
    tooltipRender: function () {
      console.log("The tooltip render event has been triggered!!!");
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  }
}
</script>