Getting Started with the Vue HeatMap Component in Vue 2

25 Jul 20267 minutes to read

This article provides a step-by-step guide to creating a Vue 2 application using Vue CLI and integrating the Syncfusion® Vue HeatMap component.

Note: This guide covers Vue 2. Vue CLI is in maintenance mode, so use Node.js, Vue CLI, and Syncfusion package releases that remain compatible with the Vue 2 project.

The HeatMap represents two-dimensional data through color variations. Each matrix value is rendered as a cell whose color indicates its magnitude. The component supports SVG and canvas rendering, categorical and numerical axes, legends, data labels, custom palettes, and tooltips.

Prerequisites

Ensure that the development environment meets the system requirements for Syncfusion® Vue UI components.

This guide requires a compatible Node.js version, npm or yarn, Vue CLI with Vue 2 support, and a Syncfusion license key for licensed use. See license key registration.

Dependencies

The following packages are used by the Vue HeatMap package:

|-- @syncfusion/ej2-vue-heatmap
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-heatmap
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-svg-base

Only @syncfusion/ej2-vue-heatmap must be installed directly. Its required dependencies are installed automatically. Use a release that supports Vue 2 and the selected Node.js version.

Set Up the Vue 2 Project

Install Vue CLI and create a Vue 2 project.

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

When prompted, select the Default ([Vue 2] babel, eslint) option from the menu.

Vue 2 project

Navigate to the project:

cd quickstart

Add the Syncfusion® Vue HeatMap Package

Syncfusion® packages are published on npm.

npm

npm install @syncfusion/ej2-vue-heatmap

yarn

yarn add @syncfusion/ej2-vue-heatmap

Note: npm v5 and later save installed packages to dependencies automatically.

Add the Syncfusion® Vue HeatMap Component

Initialize an empty HeatMap first. Data binding is added in the next section.

Step 1: Import and register the component in src/App.vue.

<script>
import { HeatMapComponent } from '@syncfusion/ej2-vue-heatmap';

export default {
  name: 'App',
  components: {
    'ejs-heatmap': HeatMapComponent
  }
};
</script>

Step 2: Add an empty HeatMap to the template.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap"></ejs-heatmap>
  </div>
</template>

At this stage, no cells are displayed because no data has been bound.

Populate the HeatMap with Data

Bind a two-dimensional numeric array to dataSource. Each value represents one cell and determines its color.

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

Bind it in the template:

<ejs-heatmap :dataSource="dataSource"></ejs-heatmap>

Here is the for the above steps. Replace src/App.vue with the following complete example:

<template>
  <ejs-heatmap id="heatmap" :dataSource='dataSource'></ejs-heatmap>
</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]
      ]
    }
  }
}
</script>

Run the Project

To run the project, use either npm or yarn:

npm

npm run serve

yarn

yarn run serve
  • Open the project URL shown in the terminal (usually http://localhost:8080) and verify the HeatMap displays with data.

Module Registration

Optional features require feature modules. Register only the modules used by the application with the exact heatmap key.

  • Legend enables the legend.
  • Tooltip enables tooltips.
<script>
import { HeatMapComponent, Legend, Tooltip } from '@syncfusion/ej2-vue-heatmap';

export default {
  components: {
    'ejs-heatmap': HeatMapComponent
  },
  provide: {
    heatmap: [Legend, Tooltip]
  }
};
</script>

Registration makes a feature available. The related properties must also be configured.

Troubleshooting

  • The HeatMap is not rendered. Verify that HeatMapComponent is imported and registered and that the browser console contains no component, package, or licensing errors.
  • The HeatMap is blank. Verify that dataSource is a nonempty two-dimensional array containing numeric values.
  • Palette colors are incorrect. Define palette values in ascending order and cover the data range.
  • A module-not-found error occurs. Verify that @syncfusion/ej2-vue-heatmap is installed and restart the development server.
  • A package or Vue version error occurs. Confirm that the package release supports Vue 2 and that all Syncfusion packages use compatible versions.

For additional assistance, refer to the Vue HeatMap API documentation.

See Also