To render a pie series, use the series type as Pie and
inject the PieSeries module into the provide. If the PieSeries module is not
injected, this module will be loaded by default.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, fill: '#498fff', text:'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
]
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>By default, radius of the pie series will be 80% of the size (minimum of chart width and height).
You can customize this using radius property of the series.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='90%'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, fill: '#498fff', text:'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
]
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using center property of the series.
<template>
<div id="app">
<ejs-accumulationchart ref='pie' :style='display:block' align='center' id='chartcontainer' :title='title'
:legendSettings='legendSettings' :tooltip='tooltip' enableSmartLables='true' :enableAnimation='enableAnimation' :center='center'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' :startAngle='startAngle' :endAngle='endAngle' :explodeOffset='explodeOffset' :explodeIndex='explodeIndex' :radius='radius' xName='x' yName='y' :dataLabel='dataLabel' name='Browser' innerRadius='0%' explode='true'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, AccumulationTooltip, PieSeries, AccumulationDataLabel, AccumulationLegend } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
],
dataLabel: {
visible: true,
position: 'Inside', name: 'text',
font: {
fontWeight: '600'
}
},
enableSmartLabels: true,
enableAnimation: false,
legendSettings: {
visible: false,
},
tooltip: { enable: false, format: '${point.x} : <b>${point.y}%</b>' },
startAngle: '0',
endAngle: '360',
radius: '70%',
explodeOffset: '10%',
explodeIndex : 0,
center: {x: '50%', y: '50%'},
title: "Mobile Browser Statistics"
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>You can use radius mapping to render the slice with different radius pie and also use border , fill properties to customize the point. dataLabel is used to represent individual data and its value.
<template>
<div id="app">
<ejs-accumulationchart id="container" ref="pie" style='display:block;' :theme='theme' :legendSettings="legendSettings" :tooltip="tooltip" :enableAnimation='enableAnimation' :enableSmartLabels='enableSmartLabels' >
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='data' xName='x' yName='y' :radius='radius' innerRadius="20%" :dataLabel="dataLabel"> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
{ x: 'Argentina', y: 505370, r: '100' },
{ x: 'Belgium', y: 551500, r: '118.7' },
{ x: 'Cuba', y: 312685, r: '124.6' },
{ x: 'Dominican Republic', y: 350000, r: '137.5' },
{ x: 'Egypt', y: 301000, r: '150.8' },
{ x: 'Kazakhstan', y: 300000, r: '155.5' },
{ x: 'Somalia', y: 357022, r: '160.6' }
],
radius: 'r',
legendSettings: { visible: true },
dataLabel: { visible: true, position: 'Outside', name: 'x'},
tooltip: {
enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>'
},
enableAnimation: true,
enableSmartLabels: true,
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>To achieve a doughnut in pie series, customize the innerRadius
property of the series. By setting value greater than 0%, a doughnut will appear. The innerRadius property takes value from 0% to 100%
of the pie radius.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='40%'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, fill: '#498fff', text:'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
]
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>You can customize the start and end angle of the pie series using the
startAngle and
endAngle properties. The default value of startAngle is 0 degree,
and endAngle is 360 degrees. By customizing this, you can achieve a semi pie series.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' startAngle=270 endAngle=90> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, fill: '#498fff', text:'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
]
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</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' :pointColorMapping=' pointColorMapping'> </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, fill: '#498fff', text:'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
],
datalabel: { visible: true, name: 'text' },
pointColorMapping: 'fill'
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>