How can I help you?
Data labels in Vue Maps component
6 Feb 202624 minutes to read
Data labels display information about Maps shapes. Enable data labels by setting the visible property of the dataLabelSettings to true.
To use the data label feature, the DataLabel module must be injected.
Adding data labels
To display data labels, specify the field name containing the label text in the labelPath property of dataLabelSettings. The field can come from either the shape data or the layer data source.
The following example sets labelPath from a field in the shape data.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, DataLabel, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
const shapeData = usMap;
const shapeSettings = {
autofill: true
};
const dataLabelSettings = {
visible: true,
labelPath: 'name'
};
provide('maps', [DataLabel]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return {
shapeData: usMap,
shapeSettings: {
autofill:true
},
dataLabelSettings: {
visible: true,
labelPath: 'name'
}
}
},
provide: {
maps: [DataLabel]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>The following example sets labelPath from a field in the layer data source.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, DataLabel, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapePropertyPath = 'continent';
const shapeDataPath = 'continent';
const dataLabelSettings = {
visible: true,
labelPath: 'continent',
smartLabelMode: 'Trim'
};
const dataSource = [
{ continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
{ continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
{ continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
{ continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
{ continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
{ continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
];
const shapeSettings = {
autofill: true
};
provide('maps', [DataLabel]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
shapeData: world_map,
shapePropertyPath: 'name',
shapeDataPath: 'name',
dataLabelSettings: {
visible: true,
labelPath: "continent",
smartLabelMode: 'Trim'
},
dataSource: [
{"name": "Afghanistan", "value": 53, "countryCode": "AF", "population": "29863010", "color": "red", "density": "119", "continent": "Asia"},
{"name": "Albania", "value": 117, "countryCode": "AL", "population": "3195000", "color": "Blue", "density": "111", "continent": "Europe"},
{"name": "Algeria", "value": 15, "countryCode": "DZ", "population": "34895000", "color": "Green", "density": "15", "continent": "Africa"}
],
shapeSettings: {
autofill: true
}
}
},
provide: {
maps: [DataLabel]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Customization
Customize data label appearance using the following properties in dataLabelSettings.
- border - To customize the color, width and opacity for the border of the data labels in Maps.
- fill - To apply the color of the data labels in Maps.
- opacity - To customize the transparency of the data labels in Maps.
- textStyle - To customize the text style of the data labels in Maps.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings' :tooltipSettings='tooltipSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, DataLabel, MapsTooltip, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
const shapeData = usMap;
const shapeSettings = {
autofill: true
};
const dataLabelSettings = {
visible: true,
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
labelPath: 'name',
border: {
color: 'green',
width: 2
},
fill: 'transparent',
opacity: 0.9,
textStyle: {
size: '17px',
fontStyle: 'Sans-serif',
fontWeight: 'normal'
}
};
const tooltipSettings = {
visible: true,
valuePath: 'name'
};
provide('maps', [DataLabel, MapsTooltip]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings' :tooltipSettings='tooltipSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, MapsTooltip, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return {
shapeData: usMap,
shapeSettings: {
autofill:true
},
dataLabelSettings: {
visible: true,
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
labelPath: 'name',
border: {
color: 'green',
width: 2
},
fill: 'transparent',
opacity: 0.9,
textStyle: {
size: '17px',
fontStyle: 'Sans-serif',
fontWeight: 'normal'
}
},
tooltipSettings: {
visible: true,
valuePath: 'name'
}
}
},
provide: {
maps: [DataLabel, MapsTooltip]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Label animation
Animate data labels during initial rendering by setting the animationDuration property in the dataLabelSettings. Specify the duration in milliseconds.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps>
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :dataLabelSettings='dataLabelSettings'
:tooltipSettings='tooltipSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, DataLabel, MapsTooltip, LayersDirective as ELayers, LayerDirective as ELayer } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
const shapeData = usMap;
const shapeSettings = {
autofill: true
};
const dataLabelSettings = {
visible: true,
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
labelPath: 'name',
animationDuration: 4000
};
const tooltipSettings = {
visible: true,
valuePath: 'name'
};
provide('maps', [DataLabel, MapsTooltip]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps>
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :dataLabelSettings='dataLabelSettings'
:tooltipSettings='tooltipSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, MapsTooltip, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data() {
return {
shapeData: usMap,
shapeSettings: {
autofill: true
},
dataLabelSettings: {
visible: true,
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
labelPath: 'name',
animationDuration: 4000
},
tooltipSettings: {
visible: true,
valuePath: 'name'
}
}
},
provide: {
maps: [DataLabel, MapsTooltip]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Smart labels
Control label behavior when labels exceed shape boundaries using the smartLabelMode property. The following modes are available:
- None - It specifies that no action is taken, when a label exceeds the shape’s region.
- Hide - It specifies to hide the labels, when it exceeds the shape’s region.
- Trim - It specifies to trim the labels, when it exceeds the shape’s region.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, DataLabel, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
const shapeData = usMap;
const shapeSettings = {
autofill:true
};
const dataLabelSettings = {
visible: true,
labelPath: 'name',
smartLabelMode:'Hide'
};
provide('maps', [DataLabel]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return {
shapeData: usMap,
shapeSettings: {
autofill:true
},
dataLabelSettings: {
visible: true,
labelPath: 'name',
smartLabelMode:'Hide'
}
}
},
provide: {
maps: [DataLabel]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Intersect action
Control label behavior when labels overlap with other labels using the intersectionAction property. The following options are available:
- None - It specifies that no action is taken, when the labels intersect.
- Hide - It specifies to hide the labels when they intersect.
- Trim - It specifies to trim the labels when they intersect.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, LayerDirective as ELayer, DataLabel, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
const shapeData = usMap;
const shapeSettings = {
autofill:true
};
const dataLabelSettings = {
visible: true,
labelPath: 'name',
intersectionAction:'Trim'
};
provide('maps', [DataLabel]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
},
data () {
return {
shapeData: usMap,
shapeSettings: {
autofill:true
},
dataLabelSettings: {
visible: true,
labelPath: 'name',
intersectionAction:'Trim'
}
}
},
provide: {
maps: [DataLabel]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Adding data label as a template
Add custom HTML elements as data label templates using the template property of dataLabelSettings.
The
smartLabelMode,intersectionAction,animationDuration,border,fill,opacity, andtextStyleproperties do not apply to templates. Apply styles to label templates using standard CSS for HTML elements.
<template>
<div id="template">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, DataLabel, LayersDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
import { createApp } from 'vue';
const app = createApp({});
let contentVue = app.component("contentTemplate", {
template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div> </img></div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
const shapeData = usMap;
const shapeSettings = {
autofill:true
};
const shapePropertyPath = 'name';
const shapeDataPath = 'Name';
const dataSource = [
{ "Name": "Iowa", "Population": "29863010" },
{ "Name": "Utah", "Population": "1263010" },
{ "Name": "Texas"," Population": "963010" }
];
const dataLabelSettings = {
visible: true,
labelPath: 'Name',
template: contentTemplate
};
provide('maps', [DataLabel]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="template">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource'
:dataLabelSettings='dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
import { createApp } from 'vue';
const app = createApp({});
let contentVue = app.component("contentTemplate", {
template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div> </img></div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return {
shapeData: usMap,
shapeSettings: {
autofill:true
},
shapePropertyPath: 'name',
shapeDataPath: 'Name',
dataSource: [
{ "Name": "Iowa", "Population": "29863010" },
{ "Name": "Utah", "Population": "1263010" },
{ "Name": "Texas"," Population": "963010" }
],
dataLabelSettings: {
visible: true,
labelPath: 'Name',
template: contentTemplate
}
}
},
provide: {
maps: [DataLabel]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>