Legend in Vue Treemap component

11 Jun 202424 minutes to read

Legend is used to provide valuable information for interpreting what the TreeMap displays. The legends can be represented in various colors, shapes or other identifiers based on the data.

Position and alignment

Legend position is used to place legend in various positions. Based on the legend position, the legend item will be aligned. For example, if the position is top or bottom, the legend items are placed by rows. If the position is left or right, the legend items are placed by columns.

The following options are available to customize the legend position:

• Top
• Bottom
• Left
• Right
• Float

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :rangeColorValuePath= 'rangeColorValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const 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 }
];

const weightValuePath = 'count';
const leafItemSettings = {
    labelPath: 'fruit',
    colorMapping:[
        {
           from:500,
           to:3000,
           color:'orange'
       },
       {
           from:3000,
           to:5000,
           color:'green'
       }
    ]
};

const rangeColorValuePath = 'count';

const legendSettings = {
    visible: true,
    position: 'Top'
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :rangeColorValuePath= 'rangeColorValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  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',
    rangeColorValuePath:'count',
    legendSettings: {
        visible: true,
        position: 'Top'
    },
    leafItemSettings: {
        labelPath: 'fruit',
        colorMapping:[
            {
               from:500,
               to:3000,
               color:'orange'
           },
           {
               from:3000,
               to:5000,
               color:'green'
           }
        ]
     }
    }
  },
  provide:{
    treemap:[TreeMapLegend]
},
}
</script>

Legend Alignment is used to align the legend items in specific location. The following options are available to customize the legend alignment:

• Near
• Center
• Far

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :rangeColorValuePath='rangeColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const 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 }
];

const weightValuePath = 'count';
const leafItemSettings = {
    labelPath: 'fruit',
    colorMapping:[
        {
           from:500,
           to:3000,
           color:'orange'
       },
       {
           from:3000,
           to:5000,
           color:'green'
       }
    ]
};

const rangeColorValuePath = 'count';

const legendSettings = {
    visible: true,
    alignment:'Far',
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :rangeColorValuePath='rangeColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent,
},
  data: function() {
    return {
    height:'350px',
     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',
    rangeColorValuePath:'count',
    legendSettings: {
       visible: true,
       alignment:'Far',
    },
    leafItemSettings: {
        labelPath: 'fruit',
        colorMapping:[
            {
               from:500,
               to:3000,
               color:'orange'
           },
           {
               from:3000,
               to:5000,
               color:'green'
           }
        ]
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Legend mode

The TreeMap control supports two different types of legend rendering modes such as Default and Interactive.

Default mode

In default mode, the legends have symbols with legend labels that are used to identify the items in the TreeMap.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { Car:'Mustang', Brand:'Ford', count:232 },
    { Car:'EcoSport', Brand:'Ford', count:121 },
    { Car:'Swift', Brand:'Maruti', count:143 },
    { Car:'Baleno', Brand:'Maruti', count:454 },
    { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
    { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
    { Car:'RS7 Sportback', Brand:'Audi', count:523 }
];

const weightValuePath = 'count';

const leafItemSettings = {
    labelPath: 'Car',
    colorMapping:[
        {
           value:'Ford',
           color:'green'
       },
       {
           value:'Audi',
           color:'red'
       },
       {
           value:'Maruti',
           color:'orange'
       }
    ]
};

const equalColorValuePath = 'Brand';

const legendSettings = {
    visible: true,
    position:'Top',
    border:{color:'black',width:2}
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent,
},
  data: function() {
    return {
     dataSource: [{ Car:'Mustang', Brand:'Ford', count:232 },
                       { Car:'EcoSport', Brand:'Ford', count:121 },
                       { Car:'Swift', Brand:'Maruti', count:143 },
                       { Car:'Baleno', Brand:'Maruti', count:454 },
                       { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
                       { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
                       { Car:'RS7 Sportback', Brand:'Audi', count:523 }
    ],
   weightValuePath: 'count',
    equalColorValuePath:'Brand',
    legendSettings: {
        visible: true,
        position:'Top',
        border:{color:'black',width:2}
    },
    leafItemSettings: {
        labelPath: 'Car',
        colorMapping:[
            {
               value:'Ford',
               color:'green'
           },
           {
               value:'Audi',
               color:'red'
           },
           {
               value:'Maruti',
               color:'orange'
           }
        ]
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Interactive mode

The legends can be made interactive with an arrow mark that indicates exact range color in the legend when the mouse hovers on the TreeMap item. Enable this option by setting the mode property in the legendSettings to Interactive.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { Car:'Mustang', Brand:'Ford', count:232 },
    { Car:'EcoSport', Brand:'Ford', count:121 },
    { Car:'Swift', Brand:'Maruti', count:143 },
    { Car:'Baleno', Brand:'Maruti', count:454 },
    { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
    { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
    { Car:'RS7 Sportback', Brand:'Audi', count:523 }
];

const weightValuePath = 'count';

const leafItemSettings = {
    labelPath: 'Car',
    colorMapping:[
        {
           value:'Ford',
           color:'green'
       },
       {
           value:'Audi',
           color:'red'
       },
       {
           value:'Maruti',
           color:'orange'
       }
    ]
};

const equalColorValuePath = 'Brand';

const legendSettings = {
    visible: true,
    position:'Top',
    mode:'Interactive',
    border:{color:'black',width:2}
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [{ Car:'Mustang', Brand:'Ford', count:232 },
                       { Car:'EcoSport', Brand:'Ford', count:121 },
                       { Car:'Swift', Brand:'Maruti', count:143 },
                       { Car:'Baleno', Brand:'Maruti', count:454 },
                       { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
                       { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
                       { Car:'RS7 Sportback', Brand:'Audi', count:523 }
    ],
   weightValuePath: 'count',
    equalColorValuePath:'Brand',
    legendSettings: {
        visible: true,
        mode:'Interactive',
        position:'Top',
        border:{color:'black',width:2}
    },
    leafItemSettings: {
        labelPath: 'Car',
        colorMapping:[
            {
               value:'Ford',
               color:'green'
           },
           {
               value:'Audi',
               color:'red'
           },
           {
               value:'Maruti',
               color:'orange'
           }
        ]
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Legend size

Customize the legend size by modifying the height and width properties in the legendSettings. It accepts values in both percentage and pixel.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { Car:'Mustang', Brand:'Ford', count:232 },
    { Car:'EcoSport', Brand:'Ford', count:121 },
    { Car:'Swift', Brand:'Maruti', count:143 },
    { Car:'Baleno', Brand:'Maruti', count:454 },
    { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
    { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
    { Car:'RS7 Sportback', Brand:'Audi', count:523 }
];

const weightValuePath = 'count';

const leafItemSettings = {
    labelPath: 'Car',
    colorMapping:[
        {
           value:'Ford',
           color:'green'
       },
       {
           value:'Audi',
           color:'red'
       },
       {
           value:'Maruti',
           color:'orange'
       }
    ]
};

const equalColorValuePath = 'Brand';

const legendSettings = {
    visible: true,
    height:'50px',
    width:'200px',
    position:'Top',
    border:{color:'black',width:2}
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [{ Car:'Mustang', Brand:'Ford', count:232 },
                       { Car:'EcoSport', Brand:'Ford', count:121 },
                       { Car:'Swift', Brand:'Maruti', count:143 },
                       { Car:'Baleno', Brand:'Maruti', count:454 },
                       { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
                       { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
                       { car:'RS7 Sportback', Brand:'Audi', count:523 }
    ],
   weightValuePath: 'count',
    equalColorValuePath:'Brand',
    legendSettings: {
        visible: true,
        height:'50px',
        width:'200px',
        position:'Top',
        border:{color:'black',width:2}
    },
    leafItemSettings: {
        labelPath: 'Car',
        colorMapping:[
            {
               value:'Ford',
               color:'green'
           },
           {
               value:'Audi',
               color:'red'
           },
           {
               value:'Maruti',
               color:'orange'
           }
        ]
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Paging support

TreeMap support legend paging, if the legend items cannot be placed within the provided height and width of the legend.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { Car:'Mustang', Brand:'Ford', count:232 },
    { Car:'EcoSport', Brand:'Ford', count:121 },
    { Car:'Swift', Brand:'Maruti', count:143 },
    { Car:'Baleno', Brand:'Maruti', count:454 },
    { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
    { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
    { Car:'RS7 Sportback', Brand:'Audi', count:523 }
];

const weightValuePath = 'count';

const leafItemSettings = {
    labelPath: 'Car',
    colorMapping:[
        {
           value:'Ford',
           color:'green'
       },
       {
           value:'Audi',
           color:'red'
       },
       {
           value:'Maruti',
           color:'orange'
       }
    ]
};

const equalColorValuePath = 'Brand';

const legendSettings = {
    visible: true,
    height:'50px',
    width:'100px',
    border:{color:'black',width:2}
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :equalColorValuePath='equalColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [{ Car:'Mustang', Brand:'Ford', count:232 },
                       { Car:'EcoSport', Brand:'Ford', count:121 },
                       { Car:'Swift', Brand:'Maruti', count:143 },
                       { Car:'Baleno', Brand:'Maruti', count:454 },
                       { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
                       { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
                       { car:'RS7 Sportback', Brand:'Audi', count:523 }
    ],
   weightValuePath: 'count',
    equalColorValuePath:'Brand',
    legendSettings: {
        visible: true,
        height:'50px',
        width:'100px',
        border:{color:'black',width:2}
    },
    leafItemSettings: {
        labelPath: 'Car',
        colorMapping:[
            {
               value:'Ford',
               color:'green'
           },
           {
               value:'Audi',
               color:'red'
           },
           {
               value:'Maruti',
               color:'orange'
           }
        ]
     },
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Legend for items excluded from color mapping

Based on the mapping ranges in the data source, get the excluded ranges from the color mapping, and show the legend with the excluded range values that are bound to the specific legend.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap"  :dataSource='dataSource' :rangeColorValuePath='rangeColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const 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 }
];

const weightValuePath = 'count';

const rangeColorValuePath = 'count';

const legendSettings = {
    visible: true
};

const leafItemSettings = {
    labelPath: 'fruit',
    colorMapping:[
        {
           from:500,
           to:2500,
           color:'green'
       },
       {
           from:3000,
           to:4000,
           color:'red'
       },
       {
           color:'orange'
       }
    ]
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :rangeColorValuePath='rangeColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  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',
    rangeColorValuePath:'count',
    legendSettings: {
        visible: true
    },
    leafItemSettings: {
        labelPath: 'fruit',
        colorMapping:[
            {
               from: 500,
               to: 2500,
               color:'green'
           },
           {
               from: 3000,
               to: 4000,
               color:'red'
           },
           {
               color:'orange'
           }
        ]
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Hide desired legend items

To enable or disable the desired legend item for each color mapping, set the showLegend property to true in the colorMapping.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :rangeColorValuePath='rangeColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const 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 }
];

const weightValuePath = 'count';

const rangeColorValuePath = 'count';

const legendSettings = {
    visible: true
};

const leafItemSettings = {
    labelPath: 'fruit',
    colorMapping:[
        {
           from: 500,
           to: 2500,
           color:'green',
            showLegend: false,
       },
       {
           from: 3000,
           to: 4000,
           color:'red',
            showLegend: true,
       },
       {
           color:'orange',
            showLegend: true
       }
    ]
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :rangeColorValuePath='rangeColorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  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',
    rangeColorValuePath:'count',
    legendSettings: {
        visible: true
    },
    leafItemSettings: {
        labelPath: 'fruit',
        colorMapping:[
            {
               from: 500,
               to: 2500,
               color:'green',
               showLegend: false,
           },
           {
               from: 3000,
               to: 4000,
               color:'red',
               showLegend: true,
           },
           {
               color:'orange',
               showLegend: true,
           }
        ]
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Hide legend items based data source value

To enable or disable the legend visibility for each item through the data source, bind the appropriate data source field name to showLegendPath property in the legendSettings.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :colorValuePath='colorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { fruit:'Apple', count:5000, visibility: true , color: 'red'},
    { fruit:'Mango', count:3000, visibility: false, color:'blue'},
    { fruit:'Orange', count:2300, visibility: true, color:'green' },
    { fruit:'Banana', count:500, visibility: false, color:'yellow' },
    { fruit:'Grape', count:4300, visibility: true, color:'orange' },
    { fruit:'Papaya', count:1200, visibility: false, color:'pink' },
    { fruit:'Melon', count:4500, visibility: true , color:'violet'}
];

const weightValuePath = 'count';
const colorValuePath='color';
const palette=[];
const legendSettings = {
    visible: true,
    showLegendPath:'visibility'
};

const leafItemSettings = {
    labelPath: 'fruit',
 }

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :colorValuePath='colorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [{ fruit:'Apple', count:5000, visibility: true , color: 'red'},
                       { fruit:'Mango', count:3000, visibility: false, color:'blue'},
                       { fruit:'Orange', count:2300, visibility: true, color:'green' },
                       { fruit:'Banana', count:500, visibility: false, color:'yellow' },
                       { fruit:'Grape', count:4300, visibility: true, color:'orange' },
                       { fruit:'Papaya', count:1200, visibility: false, color:'pink' },
                       { fruit:'Melon', count:4500, visibility: true , color:'violet'}
    ],
    weightValuePath: 'count',
    colorValuePath:'color',
    palette:[],
    legendSettings: {
        visible: true,
        showLegendPath:'visibility'
    },
    leafItemSettings: {
        labelPath: 'fruit',
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Bind legend item text from data source

To show the legend item text from the data source, bind the property name from data source to the valuePath property in the legendSettings.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :colorValuePath='colorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { fruit:'Apple', count:5000, visibility: true , color: 'red'},
    { fruit:'Mango', count:3000, visibility: false, color:'blue'},
    { fruit:'Orange', count:2300, visibility: true, color:'green' },
    { fruit:'Banana', count:500, visibility: false, color:'yellow' },
    { fruit:'Grape', count:4300, visibility: true, color:'orange' },
    { fruit:'Papaya', count:1200, visibility: false, color:'pink' },
    { fruit:'Melon', count:4500, visibility: true , color:'violet'}
];

const weightValuePath = 'count';

const colorValuePath='color';

const palette=[];

const legendSettings = {
    visible: true,
    valuePath:'fruit'
};

const leafItemSettings = {
    labelPath: 'fruit',
 }

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :colorValuePath='colorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [{ fruit:'Apple', count:5000, visibility: true , color: 'red'},
                       { fruit:'Mango', count:3000, visibility: false, color:'blue'},
                       { fruit:'Orange', count:2300, visibility: true, color:'green' },
                       { fruit:'Banana', count:500, visibility: false, color:'yellow' },
                       { fruit:'Grape', count:4300, visibility: true, color:'orange' },
                       { fruit:'Papaya', count:1200, visibility: false, color:'pink' },
                       { fruit:'Melon', count:4500, visibility: true , color:'violet'}
    ],
    weightValuePath: 'count',
    colorValuePath:'color',
    palette:[],
    legendSettings: {
        visible: true,
        valuePath:'fruit'
    },
    leafItemSettings: {
        labelPath: 'fruit',
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Hide duplicate legend items

To enable or disable the duplicate legend items, set the removeDuplicateLegend property to true in the legendSettings.

Composition API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :colorValuePath='colorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script setup>

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
import { provide } from 'vue';

const dataSource = [
    { fruit:'Apple', count:5000, visibility: true , color: 'red'},
    { fruit:'Mango', count:3000, visibility: false, color:'blue'},
    { fruit:'Orange', count:2300, visibility: true, color:'green' },
    { fruit:'Banana', count:500, visibility: false, color:'yellow' },
    { fruit:'Grape', count:4300, visibility: true, color:'orange' },
    { fruit:'Mango', count:1200, visibility: false, color:'pink' },
    { fruit:'Banana', count:4500, visibility: true , color:'violet'}
];

const weightValuePath = 'count';

const colorValuePath='color';

const palette=[];

const legendSettings = {
    visible: true,
    valuePath:'fruit',
    removeDuplicateLegend: true
};

const leafItemSettings = {
    labelPath: 'fruit'
 }

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :dataSource='dataSource' :colorValuePath='colorValuePath' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     dataSource: [{ fruit:'Apple', count:5000, visibility: true , color: 'red'},
                       { fruit:'Mango', count:3000, visibility: false, color:'blue'},
                       { fruit:'Orange', count:2300, visibility: true, color:'green' },
                       { fruit:'Banana', count:500, visibility: false, color:'yellow' },
                       { fruit:'Grape', count:4300, visibility: true, color:'orange' },
                       { fruit:'Mango', count:1200, visibility: false, color:'pink' },
                       { fruit:'Banana', count:4500, visibility: true , color:'violet'}
    ],
    weightValuePath: 'count',
    colorValuePath:'color',
    palette:[],
    legendSettings: {
        visible: true,
        valuePath:'fruit',
        removeDuplicateLegend: true
    },
    leafItemSettings: {
        labelPath: 'fruit',
     }
    }
  },
   provide:{
    treemap:[TreeMapLegend]
    },
}
</script>

Legend Responsiveness

Use a responsive legend that switches positions between the right and the bottom based on the available height and width. To enable the responsive legend, set the position property to Auto in the legendSettings and the legend position is changed based on the available height and width.

Composition API (~/src/App.vue)

<template>
  <div class="control_wrapper">
    <ejs-treemap id="treemap" :dataSource='dataSource' :weightValuePath='weightValuePath' :legendSettings='legendSettings'
      :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { TreeMapComponent as EjsTreemap, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

const dataSource = [
  { fruit: 'Apple', count: 5000 },
  { fruit: 'Grape', count: 3000 },
  { fruit: 'Apple', count: 2300 },
  { fruit: 'Banana', count: 500 },
  { fruit: 'Grape', count: 4300 },
  { fruit: 'Papaya', count: 1200 }
];

const weightValuePath = 'count';

const palette = ['#71B081', '#5A9A77', '#498770', '#39776C', '#266665', '#124F5E'];

const legendSettings = {
  visible: true,
  position: 'Auto'
};

const leafItemSettings = {
  labelPath: 'fruit',
};

provide('treemap', [TreeMapLegend]);

</script>

Options API (~/src/App.vue)

<template>
  <div class="control_wrapper">
    <ejs-treemap id="treemap" :dataSource='dataSource' :weightValuePath='weightValuePath' :legendSettings='legendSettings'
      :palette='palette' :leafItemSettings='leafItemSettings'></ejs-treemap>
  </div>
</template>
<script>

import { TreeMapComponent, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent,
},
  data: function () {
    return {
      dataSource: [{ fruit: 'Apple', count: 5000 },
      { fruit: 'Grape', count: 3000 },
      { fruit: 'Apple', count: 2300 },
      { fruit: 'Banana', count: 500 },
      { fruit: 'Grape', count: 4300 },
      { fruit: 'Papaya', count: 1200 }
      ],
      weightValuePath: 'count',
      palette: ['#71B081', '#5A9A77', '#498770', '#39776C', '#266665', '#124F5E'],
      legendSettings: {
        visible: true,
        position: 'Auto'
      },
      leafItemSettings: {
        labelPath: 'fruit',
      }
    }
  },
  provide: {
    treemap: [TreeMapLegend]
  },
}
</script>