Events in Vue HeatMap chart component

13 Jun 202424 minutes to read

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>