Search results

Getting started with Vue TreeMap component

14 Oct 2021 / 9 minutes to read

This section explains you the steps required to create a TreeMap and demonstrate its basic usage.

Dependencies

The following list of minimum dependencies are required to use the treemap:

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

Installation and configuration

You can use Vue CLI to setup your Vue applications. To install Vue CLI use the following command.

Copied to clipboard
npm install -g @vue/cli

npm install -g @vue/cli-init

Start a new project using below Vue CLI command.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart

npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com registry. You can choose the component that you want to install. For this application, we are going to use TreeMap component.

To install TreeMap component, use the following command

Copied to clipboard
npm install @syncfusion/ej2-vue-treemap –save

Registering Vue Component

For Registering Vue Component two ways are available. They are as follows.

  • Vue.use()
  • Vue.component()

Using Vue.use()

Import the Component Plugin from the EJ2 Vue Package and register the same using Vue.use() with Component Plugin as its argument.

Refer the code snippet given below.

Copied to clipboard
import { TreeMapPlugin } from '@syncfuion/ej2-vue-treemap';

Vue.use(TreeMapPlugin);

By Registering Component Plugin in Vue, all child directives are also globally registered.

Using Vue.component()

Import the Component and Component Plugin from EJ2 Vue Package, register the same using the Vue.component() with name of Component from ComponentPlugin and the EJ2 Vue Component as its arguments.

Refer the code snippet given below.

Copied to clipboard
import { TreeMapComponent, TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

Vue.component(TreeMapPlugin.name, TreeMapComponent);

Note: By using Vue.component(), only the EJ2 Vue Component is registered. Child directives needs to be registered separately.

Initialize TreeMap component

Add the EJ2 Vue TreeMap using <ejs-treemap> to the <template> section of the App.vue file in src directory, the content attribute of the TreeMap component is provided as name in data option in the <script> section.

Copied to clipboard
<template>
<div id="app">
<ejs-treemap></ejs-treemap>
  </div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

Vue.use(TreeMapPlugin);
export default Vue.extend ({});
</script>

Run the application

Now run the npm run dev command in the console, it will build your application and open in the browser.

The following example shows a basic TreeMap.

Copied to clipboard
<template>
<ejs-treemap id="treemap"></ejs-treemap>
</template>

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

Vue.use(TreeMapPlugin);

export default Vue.extend ({});
</script>

Since any data source has not been bound to the tree map, no shape will be rendered. Only an empty SVG element is appended to the tree map container.

Module Injection

The tree map control is segregated into individual feature-wise modules. To use a particular feature, inject its feature module using the provide option on component creation. Find the modules available in tree map and their descriptions as follows.

  • TreeMapHighlight - Inject this provider to use highlight feature.
  • TreeMapSelection - Inject this provider to use selection feature.
  • TreeMapLegend - Inject this provider to use legend feature.
  • TreeMapTooltip - Inject this provider to use tooltip series.

In the current application, the above basic tree map is modified to visualize international airport count in South America.

In this demo, the tree map is just rendered with labels. For this, you need not to import any modules.

Render tree map

This section explains how to render the tree map with data source.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap" :height='height' :dataSource='dataSource' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from "@syncfusion/ej2-vue-treemap";
Vue.use(TreeMapPlugin);

export default {
  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>
Copied to clipboard
export var data = [
    {
        Continent: [
            {
                Name: "Africa", Population: 1216130000, States: [
                    {
                        Name: "Eastern Africa", Population: 410637987, Region: [
                            { Name: "Ethiopia", Population: 107534882 },
                            { Name: "Tanzania", Population: 59091392 },
                            { Name: "Kenya", Population: 50950879 },
                            { Name: "Uganda", Population: 44270563 },
                            { Name: "Mozambique", Population: 30528673 },
                            { Name: "Madagascar", Population: 26262810 },
                            { Name: "Malawi", Population: 19164728 },
                            { Name: "Zambia", Population: 17609178 },
                            { Name: "Zimbabwe", Population: 16913261 },
                            { Name: "Somalia", Population: 15181925 },
                            { Name: "South, Sudan", Population: 12919053 },
                            { Name: "Rwanda", Population: 12501156 },
                            { Name: "Burundi", Population: 11216450 },
                            { Name: "Eritrea", Population: 5187948 },
                            { Name: "Mauritius", Population: 1268315 },
                            { Name: "Djibouti", Population: 971408 },
                            { Name: "Réunion", Population: 883247 },
                            { Name: "Comoros", Population: 832347 },
                            { Name: "Mayotte", Population: 259682 },
                            { Name: "Seychelles", Population: 95235 },
                        ]
                    },
                    {
                        Name: "Middle Africa", Population: 158562976, Region: [
                            { Name: "Democratic, Republic of the Congo", Population: 84004989 },
                            { Name: "Angola", Population: 30774205 },
                            { Name: "Cameroon", Population: 24678234 },
                            { Name: "Chad", Population: 15353184 },
                            { Name: "Congo", Population: 5399895 },
                            { Name: "Central African, Republic", Population: 4737423 },
                            { Name: "Gabon", Population: 2067561 },
                            { Name: "Equatorial Guinea", Population: 1313894 },
                            { Name: "Sao Tome and Principe", Population: 208818 },
                        ]
                    },
                    {
                        Name: "Northern Africa", Population: 229385603, Region: [
                            { Name: "Egypt", Population: 99375741 },
                            { Name: "Algeria", Population: 42008054 },
                            { Name: "Sudan", Population: 41511526 },
                            { Name: "Morocco", Population: 36191805 },
                            { Name: "Tunisia", Population: 11659174 },
                            { Name: "Libya", Population: 6470956 },
                            { Name: "Western, Sahara", Population: 567421 },
                        ]
                    },
                    {
                        Name: "Southern Africa", Population: 64292365, Region: [
                            { Name: "South Africa", Population: 57398421 },
                            { Name: "Namibia", Population: 2587801 },
                            { Name: "Botswana", Population: 2333201 },
                            { Name: "Lesotho", Population: 2263010 },
                            { Name: "Swaziland", Population: 1391385 },
                        ]
                    },
                    {
                        Name: "Western Africa", Population: 362201579, Region: [
                            { Name: "Nigeria", Population: 195875237 },
                            { Name: "Ghana", Population: 29463643 },
                            { Name: "Côte d'Ivoire", Population: 24905843 },
                            { Name: "Niger", Population: 22311375 },
                            { Name: "Burkina Faso", Population: 19751651 },
                            { Name: "Mali", Population: 19107706 },
                            { Name: "Senegal", Population: 16294270 },
                            { Name: "Guinea", Population: 13052608 },
                            { Name: "Benin", Population: 11485674 },
                            { Name: "Togo", Population: 7990926 },
                            { Name: "Sierra Leone", Population: 7719729 },
                            { Name: "Liberia", Population: 4853516 },
                            { Name: "Mauritania", Population: 4540068 },
                            { Name: "Gambia", Population: 2163765 },
                            { Name: "Guinea-Bissau", Population: 1907268 },
                            { Name: "Cabo Verde", Population: 553335 },
                            { Name: "Saint Helena", Population: 4074 },
                        ]
                    },
                ]
            }]
    },



    {
        Continent: [
            {
                Name: "Asia", Population: 4436224000, States: [
                    {
                        Name: "Central Asia", Population: 69787760, Region: [
                            { Name: "Uzbekistan", Population: 32364996 },
                            { Name: "Kazakhstan", Population: 18403860 },
                            { Name: "Tajikistan", Population: 9107211 },
                            { Name: "Kyrgyzstan", Population: 6132932 },
                            { Name: "Turkmenistan", Population: 5851466 },
                        ]
                    },
                    {
                        Name: "Eastern Asia", Population: 1641908531, Region: [
                            { Name: "China", Population: 1415045928 },
                            { Name: "Japan", Population: 127185332 },
                            { Name: "South Korea", Population: 51164435 },
                            { Name: "North Korea", Population: 25610672 },
                            { Name: "Taiwan", Population: 23694089 },
                            { Name: "Hong Kong", Population: 7428887 },
                            { Name: "Mongolia", Population: 3121772 },
                            { Name: "Macao", Population: 632418 },
                        ]
                    },
                    {
                        Name: "Southeastern Asia", Population: 641775797, Region: [
                            { Name: "Indonesia", Population: 266794980 },
                            { Name: "Philippines", Population: 106512074 },
                            { Name: "Viet Nam", Population: 96491146 },
                            { Name: "Thailand", Population: 69183173 },
                            { Name: "Myanmar", Population: 53855735 },
                            { Name: "Malaysia", Population: 32042458 },
                            { Name: "Cambodia", Population: 16245729 },
                            { Name: "Laos", Population: 6961210 },
                            { Name: "Singapore", Population: 5791901 },
                            { Name: "Timor-Leste", Population: 1324094 },
                            { Name: "Brunei Darussalam", Population: 434076 },
                        ]
                    },
                    {
                        Name: "Southern Asia", Population: 1846266634, Region: [
                            { Name: "India", Population: 1354051854 },
                            { Name: "Pakistan", Population: 200813818 },
                            { Name: "Bangladesh", Population: 166368149 },
                            { Name: "Iran", Population: 82011735 },
                            { Name: "Afghanistan", Population: 36373176 },
                            { Name: "Nepal", Population: 29624035 },
                            { Name: "Sri Lanka", Population: 20950041 },
                            { Name: "Bhutan", Population: 817054 },
                            { Name: "Maldives", Population: 444259 },
                        ]
                    },
                    {
                        Name: "Western Asia", Population: 262938009, Region: [
                            { Name: "Turkey", Population: 81916871 },
                            { Name: "Iraq", Population: 39339753 },
                            { Name: "Saudi Arabia", Population: 33554343 },
                            { Name: "Yemen", Population: 28915284 },
                            { Name: "Syria", Population: 18284407 },
                            { Name: "Azerbaijan", Population: 9923914 },
                            { Name: "Jordan", Population: 9903802 },
                            { Name: "United Arab Emirates", Population: 9541615 },
                            { Name: "Israel", Population: 8452841 },
                            { Name: "Lebanon", Population: 6093509 },
                            { Name: "State of Palestine", Population: 5052776 },
                            { Name: "Oman", Population: 4829946 },
                            { Name: "Kuwait", Population: 4197128 },
                            { Name: "Georgia", Population: 3907131 },
                            { Name: "Armenia", Population: 2934152 },
                            { Name: "Qatar", Population: 2694849 },
                            { Name: "Bahrain", Population: 1566993 },
                            { Name: "Cyprus", Population: 1189085 },
                        ]
                    },
                ]
            }]
    },


    {
        Continent: [
            {
                Name: "North America", Population: 579024000, States: [

                    {
                        Name: "Central America", Population: 174988756, Region: [
                            { Name: "Mexico", Population: 130759074 },
                            { Name: "Guatemala", Population: 17245346 },
                            { Name: "Honduras", Population: 9417167 },
                            { Name: "El, Salvador", Population: 6411558 },
                            { Name: "Nicaragua", Population: 6284757 },
                            { Name: "Costa, Rica", Population: 4953199 },
                            { Name: "Panama", Population: 4162618 },
                            { Name: "Belize", Population: 382444 },
                        ]
                    },
                    {
                        Name: "Northern America", Population: 358593810, Region: [
                            { Name: "U.S.", Population: 3267667480 },
                            { Name: "Canada", Population: 36953765 },
                            { Name: "Bermuda", Population: 61070 },
                            { Name: "Greenland", Population: 56565 },
                            { Name: "Saint Pierre & Miquelon", Population: 6342 },
                        ]
                    },
                ]
            }]
    },


    {
        Continent: [
            {
                Name: "South America", Population: 422535000, States: [
                    { Name: "Brazil", Population: 204519000 },
                    { Name: "Colombia", Population: 48549000 },
                    { Name: "Argentina", Population: 43132000 },
                    { Name: "Peru", Population: 31153000 },
                    { Name: "Venezuela", Population: 30620000 },
                    { Name: "Chile", Population: 18006000 },
                    { Name: "Ecuador", Population: 16279000 },
                    { Name: "Bolivia", Population: 10520000 },
                    { Name: "Paraguay", Population: 7003000 },
                    { Name: "Uruguay", Population: 3310000 },
                    { Name: "Guyana", Population: 747000 },
                    { Name: "Suriname", Population: 560000 },
                    { Name: "French Guiana", Population: 262000 },
                    { Name: "Falkland Islands", Population: 3000 },
                ]
            },
        ]
    },


    {
        Continent: [
            {
                Name: "Europe", Population: 738849000, States: [
                    {
                        Name: "Eastern Europe", Population: 291953328, Region: [
                            { Name: "Russia", Population: 143964709 },
                            { Name: "Ukraine", Population: 44009214 },
                            { Name: "Poland", Population: 38104832 },
                            { Name: "Romania", Population: 19580634 },
                            { Name: "Crech, Republic", Population: 10625250 },
                            { Name: "Hungary", Population: 9688847 },
                            { Name: "Belarus", Population: 9452113 },
                            { Name: "Bulgaria", Population: 7036848 },
                            { Name: "Slovakia", Population: 5449816 },
                            { Name: "Moldova", Population: 4041065 },
                        ]
                    },
                    {
                        Name: "Northern Europe", Population: 103642971, Region: [
                            { Name: "United Kingdom", Population: 66573504 },
                            { Name: "Sweden", Population: 9982709 },
                            { Name: "Denmark", Population: 5754356 },
                            { Name: "Finland", Population: 5542517 },
                            { Name: "Norway", Population: 5353363 },
                            { Name: "Ireland", Population: 4803748 },
                            { Name: "Lithuania", Population: 2876475 },
                            { Name: "Latvia", Population: 1929938 },
                            { Name: "Estonia", Population: 1306788 },
                            { Name: "Iceland", Population: 337780 },
                            { Name: "Channel Islands", Population: 166083 },
                            { Name: "Isle of Man", Population: 84831 },
                            { Name: "Faeroe Islands", Population: 49489 },
                        ]
                    },
                    {
                        Name: "Southern Europe", Population: 152172107, Region: [
                            { Name: "Italy", Population: 59290969 },
                            { Name: "Spain", Population: 46397452 },
                            { Name: "Greece", Population: 11142161 },
                            { Name: "Portugal", Population: 10291196 },
                            { Name: "Serbia", Population: 8762027 },
                            { Name: "Croatia", Population: 4164783 },
                            { Name: "Bosnia and Herzegovina", Population: 3503554 },
                            { Name: "Albania", Population: 2934363 },
                            { Name: "Macedonia", Population: 2085051 },
                            { Name: "Slovenia", Population: 2081260 },
                            { Name: "Montenegro", Population: 629219 },
                            { Name: "Malta", Population: 432089 },
                            { Name: "Andorra", Population: 76953 },
                            { Name: "Gibraltar", Population: 34733 },
                            { Name: "San Marino", Population: 33557 },
                            { Name: "Holy, See", Population: 801 },
                        ]
                    },
                    {
                        Name: "Western Europe", Population: 92746859, Region: [
                            { Name: "Germany", Population: 82293457 },
                            { Name: "France", Population: 65233271 },
                            { Name: "Netherlands", Population: 17084459 },
                            { Name: "Belgium", Population: 11498519 },
                            { Name: "Austria", Population: 8751820 },
                            { Name: "Switzerland", Population: 8544034 },
                            { Name: "Luxembourg", Population: 590321 },
                            { Name: "Monaco", Population: 38897 },
                            { Name: "Liechtenstein", Population: 38155 },
                        ]
                    },
                ]
            }]
    }
]

Here, the tree map is created with data source and set with the [weightValuePath] as count. You can customize the leaf level tree map items using the [leafItemSettings]. The properties such as [fill], [border], and [labelPosition] can be changed using the [leafItemSettings].

Apply color mapping

The color mapping feature supports customization of item colors based on the underlying value of item received from bound data source. Specify the field name from the values that have to be compared for the item in the [equalColorValuePath] or [rangeColorValuePath] property.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap" :height='height' :dataSource='dataSource' :weightValuePath='weightValuePath' :equalColorValuePath='equalColorValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from "@syncfusion/ej2-vue-treemap";
Vue.use(TreeMapPlugin);

export default {
  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',
    equalColorValuePath: 'Count',
    leafItemSettings: {
        labelPath: 'State',
        colorMapping: [
            {
                value: 25,
                color: '#634D6F'
            },
            {
                value: 12,
                color: '#B34D6D'
            },
            {
                value: 9,
                color: '#557C5C'
            },
            {
                value: 7,
                color: '#44537F'
            },
            {
                value: 6,
                color: '#637392'
            },
            {
                value: 3,
                color: '#7C754D'
            },
            {
                value: 2,
                color: '#2E7A64'
            },
            {
                value: 1,
                color: '#95659A'
            },
        ]
    }
}
  }
}
</script>
Copied to clipboard
export var data = [
    {
        Continent: [
            {
                Name: "Africa", Population: 1216130000, States: [
                    {
                        Name: "Eastern Africa", Population: 410637987, Region: [
                            { Name: "Ethiopia", Population: 107534882 },
                            { Name: "Tanzania", Population: 59091392 },
                            { Name: "Kenya", Population: 50950879 },
                            { Name: "Uganda", Population: 44270563 },
                            { Name: "Mozambique", Population: 30528673 },
                            { Name: "Madagascar", Population: 26262810 },
                            { Name: "Malawi", Population: 19164728 },
                            { Name: "Zambia", Population: 17609178 },
                            { Name: "Zimbabwe", Population: 16913261 },
                            { Name: "Somalia", Population: 15181925 },
                            { Name: "South, Sudan", Population: 12919053 },
                            { Name: "Rwanda", Population: 12501156 },
                            { Name: "Burundi", Population: 11216450 },
                            { Name: "Eritrea", Population: 5187948 },
                            { Name: "Mauritius", Population: 1268315 },
                            { Name: "Djibouti", Population: 971408 },
                            { Name: "Réunion", Population: 883247 },
                            { Name: "Comoros", Population: 832347 },
                            { Name: "Mayotte", Population: 259682 },
                            { Name: "Seychelles", Population: 95235 },
                        ]
                    },
                    {
                        Name: "Middle Africa", Population: 158562976, Region: [
                            { Name: "Democratic, Republic of the Congo", Population: 84004989 },
                            { Name: "Angola", Population: 30774205 },
                            { Name: "Cameroon", Population: 24678234 },
                            { Name: "Chad", Population: 15353184 },
                            { Name: "Congo", Population: 5399895 },
                            { Name: "Central African, Republic", Population: 4737423 },
                            { Name: "Gabon", Population: 2067561 },
                            { Name: "Equatorial Guinea", Population: 1313894 },
                            { Name: "Sao Tome and Principe", Population: 208818 },
                        ]
                    },
                    {
                        Name: "Northern Africa", Population: 229385603, Region: [
                            { Name: "Egypt", Population: 99375741 },
                            { Name: "Algeria", Population: 42008054 },
                            { Name: "Sudan", Population: 41511526 },
                            { Name: "Morocco", Population: 36191805 },
                            { Name: "Tunisia", Population: 11659174 },
                            { Name: "Libya", Population: 6470956 },
                            { Name: "Western, Sahara", Population: 567421 },
                        ]
                    },
                    {
                        Name: "Southern Africa", Population: 64292365, Region: [
                            { Name: "South Africa", Population: 57398421 },
                            { Name: "Namibia", Population: 2587801 },
                            { Name: "Botswana", Population: 2333201 },
                            { Name: "Lesotho", Population: 2263010 },
                            { Name: "Swaziland", Population: 1391385 },
                        ]
                    },
                    {
                        Name: "Western Africa", Population: 362201579, Region: [
                            { Name: "Nigeria", Population: 195875237 },
                            { Name: "Ghana", Population: 29463643 },
                            { Name: "Côte d'Ivoire", Population: 24905843 },
                            { Name: "Niger", Population: 22311375 },
                            { Name: "Burkina Faso", Population: 19751651 },
                            { Name: "Mali", Population: 19107706 },
                            { Name: "Senegal", Population: 16294270 },
                            { Name: "Guinea", Population: 13052608 },
                            { Name: "Benin", Population: 11485674 },
                            { Name: "Togo", Population: 7990926 },
                            { Name: "Sierra Leone", Population: 7719729 },
                            { Name: "Liberia", Population: 4853516 },
                            { Name: "Mauritania", Population: 4540068 },
                            { Name: "Gambia", Population: 2163765 },
                            { Name: "Guinea-Bissau", Population: 1907268 },
                            { Name: "Cabo Verde", Population: 553335 },
                            { Name: "Saint Helena", Population: 4074 },
                        ]
                    },
                ]
            }]
    },



    {
        Continent: [
            {
                Name: "Asia", Population: 4436224000, States: [
                    {
                        Name: "Central Asia", Population: 69787760, Region: [
                            { Name: "Uzbekistan", Population: 32364996 },
                            { Name: "Kazakhstan", Population: 18403860 },
                            { Name: "Tajikistan", Population: 9107211 },
                            { Name: "Kyrgyzstan", Population: 6132932 },
                            { Name: "Turkmenistan", Population: 5851466 },
                        ]
                    },
                    {
                        Name: "Eastern Asia", Population: 1641908531, Region: [
                            { Name: "China", Population: 1415045928 },
                            { Name: "Japan", Population: 127185332 },
                            { Name: "South Korea", Population: 51164435 },
                            { Name: "North Korea", Population: 25610672 },
                            { Name: "Taiwan", Population: 23694089 },
                            { Name: "Hong Kong", Population: 7428887 },
                            { Name: "Mongolia", Population: 3121772 },
                            { Name: "Macao", Population: 632418 },
                        ]
                    },
                    {
                        Name: "Southeastern Asia", Population: 641775797, Region: [
                            { Name: "Indonesia", Population: 266794980 },
                            { Name: "Philippines", Population: 106512074 },
                            { Name: "Viet Nam", Population: 96491146 },
                            { Name: "Thailand", Population: 69183173 },
                            { Name: "Myanmar", Population: 53855735 },
                            { Name: "Malaysia", Population: 32042458 },
                            { Name: "Cambodia", Population: 16245729 },
                            { Name: "Laos", Population: 6961210 },
                            { Name: "Singapore", Population: 5791901 },
                            { Name: "Timor-Leste", Population: 1324094 },
                            { Name: "Brunei Darussalam", Population: 434076 },
                        ]
                    },
                    {
                        Name: "Southern Asia", Population: 1846266634, Region: [
                            { Name: "India", Population: 1354051854 },
                            { Name: "Pakistan", Population: 200813818 },
                            { Name: "Bangladesh", Population: 166368149 },
                            { Name: "Iran", Population: 82011735 },
                            { Name: "Afghanistan", Population: 36373176 },
                            { Name: "Nepal", Population: 29624035 },
                            { Name: "Sri Lanka", Population: 20950041 },
                            { Name: "Bhutan", Population: 817054 },
                            { Name: "Maldives", Population: 444259 },
                        ]
                    },
                    {
                        Name: "Western Asia", Population: 262938009, Region: [
                            { Name: "Turkey", Population: 81916871 },
                            { Name: "Iraq", Population: 39339753 },
                            { Name: "Saudi Arabia", Population: 33554343 },
                            { Name: "Yemen", Population: 28915284 },
                            { Name: "Syria", Population: 18284407 },
                            { Name: "Azerbaijan", Population: 9923914 },
                            { Name: "Jordan", Population: 9903802 },
                            { Name: "United Arab Emirates", Population: 9541615 },
                            { Name: "Israel", Population: 8452841 },
                            { Name: "Lebanon", Population: 6093509 },
                            { Name: "State of Palestine", Population: 5052776 },
                            { Name: "Oman", Population: 4829946 },
                            { Name: "Kuwait", Population: 4197128 },
                            { Name: "Georgia", Population: 3907131 },
                            { Name: "Armenia", Population: 2934152 },
                            { Name: "Qatar", Population: 2694849 },
                            { Name: "Bahrain", Population: 1566993 },
                            { Name: "Cyprus", Population: 1189085 },
                        ]
                    },
                ]
            }]
    },


    {
        Continent: [
            {
                Name: "North America", Population: 579024000, States: [

                    {
                        Name: "Central America", Population: 174988756, Region: [
                            { Name: "Mexico", Population: 130759074 },
                            { Name: "Guatemala", Population: 17245346 },
                            { Name: "Honduras", Population: 9417167 },
                            { Name: "El, Salvador", Population: 6411558 },
                            { Name: "Nicaragua", Population: 6284757 },
                            { Name: "Costa, Rica", Population: 4953199 },
                            { Name: "Panama", Population: 4162618 },
                            { Name: "Belize", Population: 382444 },
                        ]
                    },
                    {
                        Name: "Northern America", Population: 358593810, Region: [
                            { Name: "U.S.", Population: 3267667480 },
                            { Name: "Canada", Population: 36953765 },
                            { Name: "Bermuda", Population: 61070 },
                            { Name: "Greenland", Population: 56565 },
                            { Name: "Saint Pierre & Miquelon", Population: 6342 },
                        ]
                    },
                ]
            }]
    },


    {
        Continent: [
            {
                Name: "South America", Population: 422535000, States: [
                    { Name: "Brazil", Population: 204519000 },
                    { Name: "Colombia", Population: 48549000 },
                    { Name: "Argentina", Population: 43132000 },
                    { Name: "Peru", Population: 31153000 },
                    { Name: "Venezuela", Population: 30620000 },
                    { Name: "Chile", Population: 18006000 },
                    { Name: "Ecuador", Population: 16279000 },
                    { Name: "Bolivia", Population: 10520000 },
                    { Name: "Paraguay", Population: 7003000 },
                    { Name: "Uruguay", Population: 3310000 },
                    { Name: "Guyana", Population: 747000 },
                    { Name: "Suriname", Population: 560000 },
                    { Name: "French Guiana", Population: 262000 },
                    { Name: "Falkland Islands", Population: 3000 },
                ]
            },
        ]
    },


    {
        Continent: [
            {
                Name: "Europe", Population: 738849000, States: [
                    {
                        Name: "Eastern Europe", Population: 291953328, Region: [
                            { Name: "Russia", Population: 143964709 },
                            { Name: "Ukraine", Population: 44009214 },
                            { Name: "Poland", Population: 38104832 },
                            { Name: "Romania", Population: 19580634 },
                            { Name: "Crech, Republic", Population: 10625250 },
                            { Name: "Hungary", Population: 9688847 },
                            { Name: "Belarus", Population: 9452113 },
                            { Name: "Bulgaria", Population: 7036848 },
                            { Name: "Slovakia", Population: 5449816 },
                            { Name: "Moldova", Population: 4041065 },
                        ]
                    },
                    {
                        Name: "Northern Europe", Population: 103642971, Region: [
                            { Name: "United Kingdom", Population: 66573504 },
                            { Name: "Sweden", Population: 9982709 },
                            { Name: "Denmark", Population: 5754356 },
                            { Name: "Finland", Population: 5542517 },
                            { Name: "Norway", Population: 5353363 },
                            { Name: "Ireland", Population: 4803748 },
                            { Name: "Lithuania", Population: 2876475 },
                            { Name: "Latvia", Population: 1929938 },
                            { Name: "Estonia", Population: 1306788 },
                            { Name: "Iceland", Population: 337780 },
                            { Name: "Channel Islands", Population: 166083 },
                            { Name: "Isle of Man", Population: 84831 },
                            { Name: "Faeroe Islands", Population: 49489 },
                        ]
                    },
                    {
                        Name: "Southern Europe", Population: 152172107, Region: [
                            { Name: "Italy", Population: 59290969 },
                            { Name: "Spain", Population: 46397452 },
                            { Name: "Greece", Population: 11142161 },
                            { Name: "Portugal", Population: 10291196 },
                            { Name: "Serbia", Population: 8762027 },
                            { Name: "Croatia", Population: 4164783 },
                            { Name: "Bosnia and Herzegovina", Population: 3503554 },
                            { Name: "Albania", Population: 2934363 },
                            { Name: "Macedonia", Population: 2085051 },
                            { Name: "Slovenia", Population: 2081260 },
                            { Name: "Montenegro", Population: 629219 },
                            { Name: "Malta", Population: 432089 },
                            { Name: "Andorra", Population: 76953 },
                            { Name: "Gibraltar", Population: 34733 },
                            { Name: "San Marino", Population: 33557 },
                            { Name: "Holy, See", Population: 801 },
                        ]
                    },
                    {
                        Name: "Western Europe", Population: 92746859, Region: [
                            { Name: "Germany", Population: 82293457 },
                            { Name: "France", Population: 65233271 },
                            { Name: "Netherlands", Population: 17084459 },
                            { Name: "Belgium", Population: 11498519 },
                            { Name: "Austria", Population: 8751820 },
                            { Name: "Switzerland", Population: 8544034 },
                            { Name: "Luxembourg", Population: 590321 },
                            { Name: "Monaco", Population: 38897 },
                            { Name: "Liechtenstein", Population: 38155 },
                        ]
                    },
                ]
            }]
    }
]

Enable legend

You can show legend for the tree map by setting the [visible] property to true in [legendSettings] object and injecting the TreeMapLegend module using the provide option.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap" :dataSource='dataSource' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :equalColorValuePath='equalColorValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
Vue.use(TreeMapPlugin);

export default {
  data: function() {
return {
 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 },
    ],
    legendSettings: {
        visible: true,
        position: 'Top',
        shape: 'Rectangle'
    },
    weightValuePath: 'Count',
    equalColorValuePath: 'Count',
    leafItemSettings: {
        labelPath: 'State',
        colorMapping: [
            {
                value: 25,
                color: '#634D6F'
            },
            {
                value: 12,
                color: '#B34D6D'
            },
            {
                value: 9,
                color: '#557C5C'
            },
            {
                value: 7,
                color: '#44537F'
            },
            {
                value: 6,
                color: '#637392'
            },
            {
                value: 3,
                color: '#7C754D'
            },
            {
                value: 2,
                color: '#2E7A64'
            },
            {
                value: 1,
                color: '#95659A'
            },
        ]
    }
}
  },
provide:{
 treemap:[TreeMapLegend]
}
}
</script>
Copied to clipboard
export var data = [
    {
        Continent: [
            {
                Name: "Africa", Population: 1216130000, States: [
                    {
                        Name: "Eastern Africa", Population: 410637987, Region: [
                            { Name: "Ethiopia", Population: 107534882 },
                            { Name: "Tanzania", Population: 59091392 },
                            { Name: "Kenya", Population: 50950879 },
                            { Name: "Uganda", Population: 44270563 },
                            { Name: "Mozambique", Population: 30528673 },
                            { Name: "Madagascar", Population: 26262810 },
                            { Name: "Malawi", Population: 19164728 },
                            { Name: "Zambia", Population: 17609178 },
                            { Name: "Zimbabwe", Population: 16913261 },
                            { Name: "Somalia", Population: 15181925 },
                            { Name: "South, Sudan", Population: 12919053 },
                            { Name: "Rwanda", Population: 12501156 },
                            { Name: "Burundi", Population: 11216450 },
                            { Name: "Eritrea", Population: 5187948 },
                            { Name: "Mauritius", Population: 1268315 },
                            { Name: "Djibouti", Population: 971408 },
                            { Name: "Réunion", Population: 883247 },
                            { Name: "Comoros", Population: 832347 },
                            { Name: "Mayotte", Population: 259682 },
                            { Name: "Seychelles", Population: 95235 },
                        ]
                    },
                    {
                        Name: "Middle Africa", Population: 158562976, Region: [
                            { Name: "Democratic, Republic of the Congo", Population: 84004989 },
                            { Name: "Angola", Population: 30774205 },
                            { Name: "Cameroon", Population: 24678234 },
                            { Name: "Chad", Population: 15353184 },
                            { Name: "Congo", Population: 5399895 },
                            { Name: "Central African, Republic", Population: 4737423 },
                            { Name: "Gabon", Population: 2067561 },
                            { Name: "Equatorial Guinea", Population: 1313894 },
                            { Name: "Sao Tome and Principe", Population: 208818 },
                        ]
                    },
                    {
                        Name: "Northern Africa", Population: 229385603, Region: [
                            { Name: "Egypt", Population: 99375741 },
                            { Name: "Algeria", Population: 42008054 },
                            { Name: "Sudan", Population: 41511526 },
                            { Name: "Morocco", Population: 36191805 },
                            { Name: "Tunisia", Population: 11659174 },
                            { Name: "Libya", Population: 6470956 },
                            { Name: "Western, Sahara", Population: 567421 },
                        ]
                    },
                    {
                        Name: "Southern Africa", Population: 64292365, Region: [
                            { Name: "South Africa", Population: 57398421 },
                            { Name: "Namibia", Population: 2587801 },
                            { Name: "Botswana", Population: 2333201 },
                            { Name: "Lesotho", Population: 2263010 },
                            { Name: "Swaziland", Population: 1391385 },
                        ]
                    },
                    {
                        Name: "Western Africa", Population: 362201579, Region: [
                            { Name: "Nigeria", Population: 195875237 },
                            { Name: "Ghana", Population: 29463643 },
                            { Name: "Côte d'Ivoire", Population: 24905843 },
                            { Name: "Niger", Population: 22311375 },
                            { Name: "Burkina Faso", Population: 19751651 },
                            { Name: "Mali", Population: 19107706 },
                            { Name: "Senegal", Population: 16294270 },
                            { Name: "Guinea", Population: 13052608 },
                            { Name: "Benin", Population: 11485674 },
                            { Name: "Togo", Population: 7990926 },
                            { Name: "Sierra Leone", Population: 7719729 },
                            { Name: "Liberia", Population: 4853516 },
                            { Name: "Mauritania", Population: 4540068 },
                            { Name: "Gambia", Population: 2163765 },
                            { Name: "Guinea-Bissau", Population: 1907268 },
                            { Name: "Cabo Verde", Population: 553335 },
                            { Name: "Saint Helena", Population: 4074 },
                        ]
                    },
                ]
            }]
    },



    {
        Continent: [
            {
                Name: "Asia", Population: 4436224000, States: [
                    {
                        Name: "Central Asia", Population: 69787760, Region: [
                            { Name: "Uzbekistan", Population: 32364996 },
                            { Name: "Kazakhstan", Population: 18403860 },
                            { Name: "Tajikistan", Population: 9107211 },
                            { Name: "Kyrgyzstan", Population: 6132932 },
                            { Name: "Turkmenistan", Population: 5851466 },
                        ]
                    },
                    {
                        Name: "Eastern Asia", Population: 1641908531, Region: [
                            { Name: "China", Population: 1415045928 },
                            { Name: "Japan", Population: 127185332 },
                            { Name: "South Korea", Population: 51164435 },
                            { Name: "North Korea", Population: 25610672 },
                            { Name: "Taiwan", Population: 23694089 },
                            { Name: "Hong Kong", Population: 7428887 },
                            { Name: "Mongolia", Population: 3121772 },
                            { Name: "Macao", Population: 632418 },
                        ]
                    },
                    {
                        Name: "Southeastern Asia", Population: 641775797, Region: [
                            { Name: "Indonesia", Population: 266794980 },
                            { Name: "Philippines", Population: 106512074 },
                            { Name: "Viet Nam", Population: 96491146 },
                            { Name: "Thailand", Population: 69183173 },
                            { Name: "Myanmar", Population: 53855735 },
                            { Name: "Malaysia", Population: 32042458 },
                            { Name: "Cambodia", Population: 16245729 },
                            { Name: "Laos", Population: 6961210 },
                            { Name: "Singapore", Population: 5791901 },
                            { Name: "Timor-Leste", Population: 1324094 },
                            { Name: "Brunei Darussalam", Population: 434076 },
                        ]
                    },
                    {
                        Name: "Southern Asia", Population: 1846266634, Region: [
                            { Name: "India", Population: 1354051854 },
                            { Name: "Pakistan", Population: 200813818 },
                            { Name: "Bangladesh", Population: 166368149 },
                            { Name: "Iran", Population: 82011735 },
                            { Name: "Afghanistan", Population: 36373176 },
                            { Name: "Nepal", Population: 29624035 },
                            { Name: "Sri Lanka", Population: 20950041 },
                            { Name: "Bhutan", Population: 817054 },
                            { Name: "Maldives", Population: 444259 },
                        ]
                    },
                    {
                        Name: "Western Asia", Population: 262938009, Region: [
                            { Name: "Turkey", Population: 81916871 },
                            { Name: "Iraq", Population: 39339753 },
                            { Name: "Saudi Arabia", Population: 33554343 },
                            { Name: "Yemen", Population: 28915284 },
                            { Name: "Syria", Population: 18284407 },
                            { Name: "Azerbaijan", Population: 9923914 },
                            { Name: "Jordan", Population: 9903802 },
                            { Name: "United Arab Emirates", Population: 9541615 },
                            { Name: "Israel", Population: 8452841 },
                            { Name: "Lebanon", Population: 6093509 },
                            { Name: "State of Palestine", Population: 5052776 },
                            { Name: "Oman", Population: 4829946 },
                            { Name: "Kuwait", Population: 4197128 },
                            { Name: "Georgia", Population: 3907131 },
                            { Name: "Armenia", Population: 2934152 },
                            { Name: "Qatar", Population: 2694849 },
                            { Name: "Bahrain", Population: 1566993 },
                            { Name: "Cyprus", Population: 1189085 },
                        ]
                    },
                ]
            }]
    },


    {
        Continent: [
            {
                Name: "North America", Population: 579024000, States: [

                    {
                        Name: "Central America", Population: 174988756, Region: [
                            { Name: "Mexico", Population: 130759074 },
                            { Name: "Guatemala", Population: 17245346 },
                            { Name: "Honduras", Population: 9417167 },
                            { Name: "El, Salvador", Population: 6411558 },
                            { Name: "Nicaragua", Population: 6284757 },
                            { Name: "Costa, Rica", Population: 4953199 },
                            { Name: "Panama", Population: 4162618 },
                            { Name: "Belize", Population: 382444 },
                        ]
                    },
                    {
                        Name: "Northern America", Population: 358593810, Region: [
                            { Name: "U.S.", Population: 3267667480 },
                            { Name: "Canada", Population: 36953765 },
                            { Name: "Bermuda", Population: 61070 },
                            { Name: "Greenland", Population: 56565 },
                            { Name: "Saint Pierre & Miquelon", Population: 6342 },
                        ]
                    },
                ]
            }]
    },


    {
        Continent: [
            {
                Name: "South America", Population: 422535000, States: [
                    { Name: "Brazil", Population: 204519000 },
                    { Name: "Colombia", Population: 48549000 },
                    { Name: "Argentina", Population: 43132000 },
                    { Name: "Peru", Population: 31153000 },
                    { Name: "Venezuela", Population: 30620000 },
                    { Name: "Chile", Population: 18006000 },
                    { Name: "Ecuador", Population: 16279000 },
                    { Name: "Bolivia", Population: 10520000 },
                    { Name: "Paraguay", Population: 7003000 },
                    { Name: "Uruguay", Population: 3310000 },
                    { Name: "Guyana", Population: 747000 },
                    { Name: "Suriname", Population: 560000 },
                    { Name: "French Guiana", Population: 262000 },
                    { Name: "Falkland Islands", Population: 3000 },
                ]
            },
        ]
    },


    {
        Continent: [
            {
                Name: "Europe", Population: 738849000, States: [
                    {
                        Name: "Eastern Europe", Population: 291953328, Region: [
                            { Name: "Russia", Population: 143964709 },
                            { Name: "Ukraine", Population: 44009214 },
                            { Name: "Poland", Population: 38104832 },
                            { Name: "Romania", Population: 19580634 },
                            { Name: "Crech, Republic", Population: 10625250 },
                            { Name: "Hungary", Population: 9688847 },
                            { Name: "Belarus", Population: 9452113 },
                            { Name: "Bulgaria", Population: 7036848 },
                            { Name: "Slovakia", Population: 5449816 },
                            { Name: "Moldova", Population: 4041065 },
                        ]
                    },
                    {
                        Name: "Northern Europe", Population: 103642971, Region: [
                            { Name: "United Kingdom", Population: 66573504 },
                            { Name: "Sweden", Population: 9982709 },
                            { Name: "Denmark", Population: 5754356 },
                            { Name: "Finland", Population: 5542517 },
                            { Name: "Norway", Population: 5353363 },
                            { Name: "Ireland", Population: 4803748 },
                            { Name: "Lithuania", Population: 2876475 },
                            { Name: "Latvia", Population: 1929938 },
                            { Name: "Estonia", Population: 1306788 },
                            { Name: "Iceland", Population: 337780 },
                            { Name: "Channel Islands", Population: 166083 },
                            { Name: "Isle of Man", Population: 84831 },
                            { Name: "Faeroe Islands", Population: 49489 },
                        ]
                    },
                    {
                        Name: "Southern Europe", Population: 152172107, Region: [
                            { Name: "Italy", Population: 59290969 },
                            { Name: "Spain", Population: 46397452 },
                            { Name: "Greece", Population: 11142161 },
                            { Name: "Portugal", Population: 10291196 },
                            { Name: "Serbia", Population: 8762027 },
                            { Name: "Croatia", Population: 4164783 },
                            { Name: "Bosnia and Herzegovina", Population: 3503554 },
                            { Name: "Albania", Population: 2934363 },
                            { Name: "Macedonia", Population: 2085051 },
                            { Name: "Slovenia", Population: 2081260 },
                            { Name: "Montenegro", Population: 629219 },
                            { Name: "Malta", Population: 432089 },
                            { Name: "Andorra", Population: 76953 },
                            { Name: "Gibraltar", Population: 34733 },
                            { Name: "San Marino", Population: 33557 },
                            { Name: "Holy, See", Population: 801 },
                        ]
                    },
                    {
                        Name: "Western Europe", Population: 92746859, Region: [
                            { Name: "Germany", Population: 82293457 },
                            { Name: "France", Population: 65233271 },
                            { Name: "Netherlands", Population: 17084459 },
                            { Name: "Belgium", Population: 11498519 },
                            { Name: "Austria", Population: 8751820 },
                            { Name: "Switzerland", Population: 8544034 },
                            { Name: "Luxembourg", Population: 590321 },
                            { Name: "Monaco", Population: 38897 },
                            { Name: "Liechtenstein", Population: 38155 },
                        ]
                    },
                ]
            }]
    }
]