Getting Started with the Vue TreeMap Component in Vue 2

25 Jul 20268 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 TreeMap component.

You can explore some useful features of the TreeMap component in the following video.

The Vue TreeMap customization video demonstrates data binding, item customization, color mapping, and related visualization features.

Prerequisites

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

Dependencies

The following packages are used by the Vue TreeMap package:

|-- @syncfusion/ej2-treemap
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Only the @syncfusion/ej2-vue-treemap package must be installed directly. Its required dependencies are installed automatically.

Use a package release that supports Vue 2. Before upgrading, check the Vue system requirements and package release notes.

Note: The TreeMap renders its visualization with SVG. This basic example does not require a separate TreeMap theme stylesheet.

Set Up the Vue 2 Project

Install Vue CLI globally using either npm or yarn, and create a project with the vue create command.

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

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

Vue 2 project

After the project is created, navigate to its directory:

cd quickstart

Add the Syncfusion® Vue TreeMap Package

Syncfusion® packages are published on npm.

Install the @syncfusion/ej2-vue-treemap package using either npm or yarn.

npm

npm install @syncfusion/ej2-vue-treemap

yarn

yarn add @syncfusion/ej2-vue-treemap

Note: npm v5 and later save installed packages to dependencies by default, so the --save option is not required.

Add the Syncfusion® Vue TreeMap Component

Follow these steps to initialize an empty Vue TreeMap component. Data binding is added in the next section.

Step 1: Import and locally register the TreeMap component in the script section of src/App.vue.

<script>
import { TreeMapComponent } from '@syncfusion/ej2-vue-treemap';

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

Step 2: Add an empty TreeMap component to the template section of src/App.vue.

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

At this stage, the component contains no data and does not display TreeMap items.

Step 3: Bind Data to TreeMap

The example uses the following properties:

  • dataSource specifies the array of data objects.
  • weightValuePath specifies the numeric field that determines each rectangle’s size.
  • leafItemSettings configures leaf labels and appearance.
  • labelPath specifies the data field displayed as the leaf label.

Replace the contents of src/App.vue with the below example.

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :height='height' :dataSource='dataSource' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>
import { TreeMapComponent } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
  components: {
    'ejs-treemap': TreeMapComponent
  },
  data: function() {
    return {
    height:'350px',
     dataSource: [
        { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
        { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
        { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
        { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
        { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
        { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
        { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
        { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
        { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
        { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
        { Title: 'State wise International Airport count in South America', State: "Falkland Islands",Count: 1 },
        { Title: 'State wise International Airport count in South America', State: "French Guiana", Count:1 },
        { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
        { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
    ],
    weightValuePath: 'Count',
    leafItemSettings: {
        labelPath: 'State',
    }
    }
  }
}
</script>

Run the Project

Save src/App.vue, and then start the development server.

npm

npm run serve

yarn

yarn run serve

Open the URL displayed in the terminal, commonly http://localhost:8080, and verify that the TreeMap is displayed correctly.

Register Feature Modules

The TreeMap loads optional features through feature-specific modules. If a required module is not registered, the related feature is not rendered.

The following modules are commonly used:

  • TreeMapHighlight enables highlighting.
  • TreeMapSelection enables selection.
  • TreeMapLegend enables the legend.
  • TreeMapTooltip enables tooltips.

Register only the modules required by the application inside the component’s export default object, using the exact treemap key:

<script>
import { TreeMapComponent, TreeMapHighlight, TreeMapSelection, TreeMapLegend, TreeMapTooltip } from '@syncfusion/ej2-vue-treemap';

export default {
  components: {
    'ejs-treemap': TreeMapComponent
  },
  provide: {
    treemap: [TreeMapHighlight, TreeMapSelection, TreeMapLegend, TreeMapTooltip]
  }
};
</script>

Refer to the TreeMap API documentation and the related feature pages for configuration details.

Sample: Explore the Vue TreeMap getting-started sample.

Troubleshooting

  • The TreeMap is not rendered. Verify that TreeMapComponent is imported and registered, the data source contains records, and the browser console contains no component, package, or licensing errors.
  • The TreeMap is blank. Verify that weightValuePath matches a numeric field in every data object.
  • Labels are not displayed. Verify that leafItemSettings.labelPath matches a field in every data object.
  • A module-not-found error occurs. Verify that @syncfusion/ej2-vue-treemap is installed and restart the development server.
  • A package or Vue version error occurs. Confirm that the installed package release supports Vue 2 and that all Syncfusion packages use compatible versions.

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

See Also