Getting Started with the Vue HeatMap Component in Vue 2

22 Sep 202324 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue HeatMap component

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

For using heat map, the following minimum requirements are needed.

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

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion components to the project.

Add Syncfusion Vue packages

Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue HeatMap component as an example. Install the @syncfusion/ej2-vue-heatmap package by running the following command:

npm install @syncfusion/ej2-vue-heatmap --save

yarn  add @syncfusion/ej2-vue-heatmap

Adding Syncfusion Vue HeatMap component

Follow the below steps to add the Vue HeatMap component:

1. First, import and register the HeatMap component in the script section of the src/App.vue file.

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

export default {
  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>

2. In the template section, define the HeatMap component.

~/src/App.vue
<template>
    <div id="app">
      <ejs-heatmap id="heatmap" :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>

Here is the summarized code for the above steps in the src/App.vue file:

~/src/App.vue
<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 the following command:

npm run serve

yarn run serve

Module injection

The heat map components are segregated into individual feature-wise modules. To use its feature, you need to inject its feature service in the AppModule. In the current application,the basic heat map is modified to visualize sales revenue data for week, and the tooltip and legend features of the heat map are used. Find the relevant feature modules and descriptions as follows.

Legend - Provides the legend feature by injecting it.
Tooltip - Provides the tooltip feature by injecting it.

Now, import the above-mentioned modules from the heat map package and inject them into provide.

~/src/App.vue
<script>
import Vue from "vue";
import { HeatMapComponent, Legend, Tooltip } from "@syncfusion/ej2-vue-heatmap";

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

Populate heat map with data

This section explains how to populate the following two-dimensional array data to the heat map.

~/src/App.vue
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :dataSource='dataSource'></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]
      ]
    }
  }
}
</script>

Enable axis labels

You can add axis labels to the heat map and format those labels using the xAxis and yAxis properties. Axis labels provide additional information about the data points populated in the heat map.

~/src/App.vue
<template>
  <div class="control_wrapper">
    <ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis'></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 {
      xAxis: {
        labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
          'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
      },
      yAxis: {
        labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
      },
      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]
      ]
    }
  },
  provide: {
    heatmap: [Tooltip, Legend]
  },
}
</script>

Add heat map title

Add a title using the titleSettings property to the heat map to provide quick information to the user about the data populated in the heat map.

~/src/App.vue
<template>
    <div class="control_wrapper">
        <ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis'
            :titleSettings='titleSettings'></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 {
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            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]
            ]
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    },
}
</script>

Enable legend

Use a legend for the heat map in the legendSettings object by setting the visible property to true and injecting the Legend module into the provide.

~/src/App.vue
<template>
    <div class="control_wrapper">
        <ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis' :titleSettings='titleSettings'
            :legendSettings='legendSettings'></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 {
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            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]
            ],
            legendSettings: {
                visible: true,
                position: 'Right',
                showLabel: true,
                height: "150"
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    },
}
</script>

Add data label

Add data labels to improve the readability of the heat map. This can be achieved by setting the showLabel property to true in the cellSettings object.

~/src/App.vue
<template>
    <div class="control_wrapper">
       <ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis' :titleSettings='titleSettings' :legendSettings='legendSettings' :cellSettings='cellSettings'>
       </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 {
        xAxis: {
            labels: ['Nancy', 'Andrew','Janet', 'Margaret', 'Steven',
                        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
         },
        yAxis:{
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
        cellSettings: {
            showLabel: true,
        },
        titleSettings: {
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        },
        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]
        ],
        legendSettings: {
            visible:true,
            position: 'Right',
            showLabel: true,
            height: "150"
        }
    }
  },
  provide:{
    heatmap:[Tooltip, Legend]
},
}
</script>

Add custom cell palette

The default palette settings of the heat map cells can be customized by using the paletteSettings property. Using the palette property in paletteSettings object, you can change the color set for the cells. You can change the color mode of the cells to fixed or gradient mode using the type property.

~/src/App.vue
<template>
    <ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis' :titleSettings='titleSettings'
        :legendSettings='legendSettings' :cellSettings='cellSettings' :paletteSettings='paletteSettings'></ejs-heatmap>
</template>
<script>
import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        'ejs-heatmap': HeatMapComponent
    },
    data: function () {
        return {
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            cellSettings: {
                showLabel: true,
            },
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            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]
            ],
            legendSettings: {
                visible: true,
                position: 'Right',
                showLabel: true,
                height: "150"
            },
            paletteSettings: {
                palette: [
                    { value: 0, color: '#C06C84' },
                    { value: 50, color: '#6C5B7B' },
                    { value: 100, color: '#355C7D' }
                ],
                type: "Gradient"
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    },
}
</script>

The tooltip is used when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the showTooltip property to true and injecting the Tooltip module into the provide.

~/src/App.vue
<template>
    <ejs-heatmap id="heatmap" :dataSource='dataSource' :xAxis='xAxis' :yAxis='yAxis' :titleSettings='titleSettings'
        :legendSettings='legendSettings' :cellSettings='cellSettings' :showTooltip='showTooltip'></ejs-heatmap>
</template>
<script>
import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        'ejs-heatmap': HeatMapComponent
    },
    data: function () {
        return {
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            cellSettings: {
                showLabel: true,
            },
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            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]
            ],
            legendSettings: {
                visible: true,
                position: 'Right',
                showLabel: true,
                height: "150"
            },
            showTooltip: true
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    },
}
</script>