Data label in Vue Treemap component

11 Jun 202413 minutes to read

Data Labels are used to identify the name of items or groups in the TreeMap component. Data Labels will be shown by specifying the data source properties in the labelPath of the leafItemSettings.

Format

Customize the labels for each item using the labelFormat property in the leafItemSettings.

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

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

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',
    labelFormat:'${Car}-${Brand}'
};

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

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

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     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',
    leafItemSettings: {
        labelPath: 'Car',
        labelFormat:'${Car}-${Brand}'
     }
    }
  }
}
</script>

Template

The template supports customizing labels of each leaf node using the labelTemplate property. It uses Essential JS2 template engine to render elements and the position of templates can be customize using the templatePosition property.

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


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

const app = createApp({});

let contentVue = app.component("contentTemplate", {
  template: '<div>-</div>',
  data() {
    return {
      data: {}
    };
  }
});
let contentTemplate = function() {
  return { template: contentVue };
};

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',
    labelTemplate:contentTemplate
};

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


import { TreeMapComponent } from "@syncfusion/ej2-vue-treemap";
import { createApp } from 'vue';

const app = createApp({});

let contentVue =app.component("contentTemplate", {
  template: '<div>-</div>',
  data() {
    return {
      data: {}
    };
  }
});

let contentTemplate = function() {
  return { template: contentVue };
};
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',
    leafItemSettings: {
       labelPath: 'Car',
       labelTemplate:contentTemplate
     }
    }
  }
}
</script>

InterSectAction

When the label size in each item exceeds the actual size, use the interSectAction property in the leafItemSettings to customise the labels.

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

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

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',
    labelFormat:'${Car}-${Brand}',
    interSectAction:'WrapByWord'
};

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

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

export default {
name: "App",
components: {
"ejs-treemap":TreeMapComponent
},
  data: function() {
    return {
     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',
    leafItemSettings: {
        labelPath: 'Car',
        labelFormat:'${Car}-${Brand}',
        interSectAction:'WrapByWord'
     }
    }
  }
}
</script>