Search results

Internationalization in Vue TreeMap component

28 Jul 2021 / 5 minutes to read

The tree map control supports internationalization for the following elements:

  • Data label
  • Tooltip

For more information about number and date formatter, refer to internationalization.

Globalization

Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the tree map control using the [format] property in the treemap model.

Numeric format

In the following code example, tooltip is globalized to Deutsch culture.

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

export default {
  data: function() {
return {
    format:'c',
dataSource: [
    {State:"United States", GDP:17946, percentage:11.08, Rank:1},
{State:"China", GDP:10866, percentage: 28.42, Rank:2},
{State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
{State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
{State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
{State:"France", GDP:2421, percentage:-9.69, Rank:6},
{State:"India", GDP:2073, percentage:13.65, Rank:7},
{State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
{State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
{State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
],
weightValuePath: 'GDP',
leafItemSettings: {
    labelPath: 'GDP',
}
}
  }
}
</script>

Right-to-left rendering

The TreeMap control supports right-to-left rendering for all its elements such as nodes, tooltip, data labels, and legends.

Legend with Rtl support

If you set the enableRtl property to true, then the legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap"  :dataSource='dataSource' :legendSettings='legendSettings' :colorValuePath ='colorValuePath' :weightValuePath='weightValuePath'  :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: [
                   { Car:'Mustang', Brand:'Ford', count:232, color: '#71B081' },
                   { Car:'EcoSport', Brand:'Ford', count:121,  color: '#5A9A77' },
                   { Car:'Swift', Brand:'Maruti', count:143, color: '#498770' },
                   { Car:'Baleno', Brand:'Maruti', count:454, color: '#39776C' },
                   { Car:'Vitara Brezza', Brand:'Maruti', count:545 , color: '#266665' },
                   { Car:'A3 Cabriolet', Brand:'Audi',count:123, color: '#124F5E' }
],
  weightValuePath: 'count',
colorValuePath: 'color',
enableRtl:true,
legendSettings: {
    visible: true,
    position:'Top'
},
leafItemSettings: {
    labelPath: 'Car'
 },
}
  },
  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 },
                        ]
                    },
                ]
            }]
    }
]

Tooltip with Rtl support

If the enableRtl property is set to true, the tooltip data will be rendered in reverse direction.

The following example shows the format of the tooltip.

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

export default {
  data: function() {
return {
 dataSource: [
                   { fruit:'Apple', count:5000 },
                   { fruit:'Mango', count:3000 },
                   { fruit:'Orange', count:2300 },
                   { fruit:'Banana', count:500 },
                   { fruit:'Grape', count:4300 },
                   { fruit:'Papaya', count:1200 },
                   { fruit:'Melon', count:4500 }
],
  weightValuePath: 'count',
palette:['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'],
 tooltipSettings: {
        visible: true,
        format:'${count} : ${fruit}'
},
leafItemSettings: {
    labelPath: 'fruit'
 }
}
  },
  provide:{
treemap:[ TreeMapTooltip]
},
}
</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 },
                        ]
                    },
                ]
            }]
    }
]

Treemap Item Rendering Direction

By default, the direction of tree map item is TopLeftBottomRight. You can customize the rendering direction of the tree map item by setting the renderDirection property. The TreeMap can be rendered in the following four different directions. TopLeftBottomRight TopRightBottomLeft BottomRightTopLeft BottomLeftTopRight

The following example demonstrate how to render the treemap in the RTL direction with TopLeftBottomRight.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap"  :dataSource='dataSource' :palette='palette' :renderDirection='renderDirection' :weightValuePath='weightValuePath'  :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: [
                   { fruit:'Apple', count:5000 },
                   { fruit:'Mango', count:3000 },
                   { fruit:'Orange', count:2300 },
                   { fruit:'Banana', count:500 },
                   { fruit:'Grape', count:4300 },
                   { fruit:'Papaya', count:1200 },
                   { fruit:'Melon', count:4500 }
],
weightValuePath: 'count',
palette:['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'],
renderDirection:'TopLeftBottomRight',
leafItemSettings: {
    labelPath: 'fruit'
 }
}
  },
  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 },
                        ]
                    },
                ]
            }]
    }
]

The following example demonstrate how to render the treemap in the RTL direction with TopRightBottomLeft.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap"  :dataSource='dataSource' :palette='palette' :renderDirection='renderDirection' :weightValuePath='weightValuePath'  :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: [
                   { fruit:'Apple', count:5000 },
                   { fruit:'Mango', count:3000 },
                   { fruit:'Orange', count:2300 },
                   { fruit:'Banana', count:500 },
                   { fruit:'Grape', count:4300 },
                   { fruit:'Papaya', count:1200 },
                   { fruit:'Melon', count:4500 }
],
 weightValuePath: 'count',
palette:['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'],
renderDirection:'TopRightBottomLeft',
leafItemSettings: {
    labelPath: 'fruit'
 }
}
  },
  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 },
                        ]
                    },
                ]
            }]
    }
]

The following example demonstrate how to render the treemap in the RTL direction with BottomRightTopLeft.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap"  :dataSource='dataSource' :palette='palette' :renderDirection='renderDirection' :weightValuePath='weightValuePath'  :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: [
                   { fruit:'Apple', count:5000 },
                   { fruit:'Mango', count:3000 },
                   { fruit:'Orange', count:2300 },
                   { fruit:'Banana', count:500 },
                   { fruit:'Grape', count:4300 },
                   { fruit:'Papaya', count:1200 },
                   { fruit:'Melon', count:4500 }
],
weightValuePath: 'count',
palette:['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'],
renderDirection:'BottomRightTopLeft',
leafItemSettings: {
    labelPath: 'fruit'
 }
}
  },
  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 },
                        ]
                    },
                ]
            }]
    }
]

The following example demonstrate how to render the treemap in the RTL direction with BottomLeftTopRight.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div class="control_wrapper">
    <ejs-treemap id="treemap"  :dataSource='dataSource' :palette='palette' :renderDirection='renderDirection' :weightValuePath='weightValuePath'  :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: [
                   { fruit:'Apple', count:5000 },
                   { fruit:'Mango', count:3000 },
                   { fruit:'Orange', count:2300 },
                   { fruit:'Banana', count:500 },
                   { fruit:'Grape', count:4300 },
                   { fruit:'Papaya', count:1200 },
                   { fruit:'Melon', count:4500 }
],
weightValuePath: 'count',
palette:['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'],
renderDirection:'BottomLeftTopRight',
leafItemSettings: {
    labelPath: 'fruit'
 }
}
  },
  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 },
                        ]
                    },
                ]
            }]
    }
]