Data label can be added to a chart series by enabling the visible
option in the dataLabel property.
<template>
<div id="app">
<ejs-accumulationchart id="container" enableSmartLabels='enableSmartLabels'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
],
datalabel: { visible: true, name:'text' },
enableSmartLabels: true
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Note: To use the data label feature, inject the DataLabel
into the provide
.
Accumulation chart provides support for placing the data label either inside
or outside
the chart.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
],
datalabel: { visible: true, position:'Outside', name:'text' },
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Using angle
property, you can rotate the data label by its given angle.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
],
datalabel: { visible: true, name:'text', angle: 90, enableRotation: true },
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Datalabels will be arranged smartly without overlapping with each other. You can enable or disable this feature using
the enableSmartLabels
property.
<template>
<div id="app">
<ejs-accumulationchart id="container" enableSmartLabels='enableSmartLabels'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
datalabel: { visible: true, name: 'text', position: 'Outside', name:'text' },
enableSmartLabels: true
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Label content can be formatted by using the template option. Inside the template, you can add the placeholder text
${point.x}
and ${point.y}
to display corresponding data points x & y value. Using
template
property, you can set data label
template in chart.
<template>
<div id="app">
<ejs-accumulationchart id="container" enableSmartLabels='enableSmartLabels'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
datalabel: { visible: true, name: 'text', position: 'Inside',
template: "<div id='templateWrap' style='background-color:#bd18f9;border-radius: 3px; float: right;padding: 2px;line-height: 20px;text-align: center;'>"+ "<img src='sun_annotation.png' />" + "<div style='color:white; font-family:Roboto; font-style: medium; fontp-size:14px;float: right;padding: 2px;line-height: 20px;text-align: center;padding-right:6px'><span>${point.y}</span></div></div>" },
enableSmartLabels: true
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Connector line will be visible when the data label is placed outside
the chart.
The connector line can be customized using the type
, color
, width
, length
and dashArray
properties
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
datalabel: { visible: true, name: 'text', position: 'Outside',
connectorStyle:{
//Length of the connector line in pixels
length: '50px',
//Width of the connector line in pixels
width: 2,
//dashArray of the connector line
dashArray: '5,3',
//Color of the connector line
color: '#f4429e',
//Specifies the type of the connector line either Line or Curve
type: 'Curve'
} }
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
The fill color and the text in the data source can be mapped to the chart using pointColorMapping
in series and
name
in datalabel respectively.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
datalabel: { visible: true, name: 'text' }
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Individual text can be customized using the textRender
event.
<template>
<div id="app">
<ejs-accumulationchart id="container" :textRender='onTextRender'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
datalabel: { visible: true, name: 'text', position: 'Outside' }
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
},
methods: {
onTextRender: function (args) {
if (args.text.indexOf('Mar') > -1) {
args.color = 'red';
args.border.width = 1;
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
You can show the percentages in data labels of pie chart using textRender
event and template
option.
You can customize the data label of pie chart using textRender event as follows to show percentage.
<template>
<div id="app">
<ejs-accumulationchart id="container" enableSmartLabels='enableSmartLabels' :textRender='onTextRender'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
],
datalabel: { visible: true },
enableSmartLabels: true
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
},
methods: {
onTextRender: function (args) {
args.text = args.point.percentage + "%";
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
You can display the percentage values in data label of pie chart using template
option.
<template>
<div id="app">
<ejs-accumulationchart id="container" enableSmartLabels='enableSmartLabels'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :dataLabel='datalabel'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
],
datalabel: { visible: true, template: "<div id='dataLabelTemplate'>${point.percentage}%</div>" },
enableSmartLabels: true
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>