Center Label in Vue Accumulation chart component
13 Jun 202417 minutes to read
Center label
Using centerLabel it is now possible to place a label at the center of a pie or donut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the text property in the centerLabel.
<template>
<div id="app">
<ejs-accumulationchart id="container" :centerLabel="centerLabel">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: 'Others: 3.6%' }
];
const centerLabel = {
text: 'Mobile<br>Browsers<br>Statistics'
};
provide('accumulationchart', [PieSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container" :centerLabel="centerLabel">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-accumulationchart': AccumulationChartComponent,
'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
'e-accumulation-series': AccumulationSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: 'Others: 3.6%' }
],
centerLabel: {
text: 'Mobile<br>Browsers<br>Statistics'
}
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Hover text
The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the hoverTextFormat property.
<template>
<div id="app">
<ejs-accumulationchart id="container" :centerLabel="centerLabel">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: 'Others: 3.6%' }
];
const centerLabel = {
text: 'Mobile<br>Browsers<br>Statistics',
hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'
};
provide('accumulationchart', [PieSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container" :centerLabel="centerLabel">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-accumulationchart': AccumulationChartComponent,
'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
'e-accumulation-series': AccumulationSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: 'Others: 3.6%' }
],
centerLabel: {
text: 'Mobile<br>Browsers<br>Statistics',
hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'
}
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customization
Customize the center label text using the textStyle property.
<template>
<div id="app">
<ejs-accumulationchart id="container" :centerLabel="centerLabel">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: 'Others: 3.6%' }
];
const centerLabel = {
text: 'Mobile<br>Browsers<br>Statistics',
hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
textStyle: {
fontWeight: '900',
size: '15px',
color: 'red',
fontFamily: 'Roboto',
fontStyle: 'Italic'
}
};
provide('accumulationchart', [PieSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container" :centerLabel="centerLabel">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-accumulationchart': AccumulationChartComponent,
'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
'e-accumulation-series': AccumulationSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: 'Others: 3.6%' }
],
centerLabel: {
text : 'Mobile<br>Browsers<br>Statistics',
hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
textStyle:{
fontWeight: '900',
size: '15px',
color: 'red',
fontFamily: 'Roboto',
fontStyle: 'Italic'
}
}
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>