- Pie chart
- Radius customization
- Various radius pie chart
- Donut chart
- Text and fill color mapping
- Customization
Contact Support
Pie and Donut in Vue 3D Circular Chart component
13 Jun 202424 minutes to read
Pie chart
To render a pie series, inject the PieSeries3D
into the provide
.
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
{ x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
{ x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
{ x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const tilt = -45;
const legendSettings = {
visible: false
};
provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-circularchart3d': CircularChart3DComponent,
'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
'e-circularchart3d-series': CircularChart3DSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
{ x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
{ x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
{ x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
],
tilt: -45,
legendSettings: {
visible: false
}
};
},
provide: {
circularchart3d: [PieSeries3D, CircularChartLegend3D]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Radius customization
By default, the radius of the pie series will be 80% of the size, which is the minimum of the 3D Circular Chart’s width and height. You can customize this by using the radius
property of the series.
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y' radius='100%'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
{ x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
{ x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
{ x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
{ x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
];
const tilt = -45;
const legendSettings = {
visible: false
};
provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y' radius='100%'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-circularchart3d': CircularChart3DComponent,
'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
'e-circularchart3d-series': CircularChart3DSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
{ x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
{ x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
{ x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
{ x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
],
tilt: -45,
legendSettings: {
visible: false
}
};
},
provide: {
circularchart3d: [PieSeries3D, CircularChartLegend3D]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Various radius pie chart
You can assign different radii to each slice of the pie by fetching the radius from the data source and using it with the radius
property in the series
.
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :title='title' :legendSettings='legendSettings'
enableAnimation='true'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y' radius='r' innerRadius='20%'
:dataLabel='dataLabel'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Belgium', y: 551500, r: '110.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' },
{ x: 'Argentina', y: 505370, r: '100' }
];
const tilt = -15;
const title = 'Countries compared by population density and total area';
const legendSettings = {
visible: true
};
const dataLabel = {
visible: true,
position: 'Outside',
name: 'x'
};
provide('circularchart3d', [PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :title='title' :legendSettings='legendSettings'
enableAnimation='true'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y' radius='r' innerRadius='20%'
:dataLabel='dataLabel'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-circularchart3d': CircularChart3DComponent,
'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
'e-circularchart3d-series': CircularChart3DSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Belgium', y: 551500, r: '110.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' },
{ x: 'Argentina', y: 505370, r: '100' }
],
tilt: -15,
title: 'Countries compared by population density and total area',
legendSettings: {
visible: true
},
dataLabel: {
visible: true,
position: 'Outside',
name: 'x'
}
};
},
provide: {
circularchart3d: [PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Donut chart
To achieve a donut in the pie series, customize the innerRadius
property of the series. By setting a value greater than 0%, a donut will appear. The innerRadius
property takes value from 0% to 100% of the pie radius.
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'
innerRadius='40%'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
{ x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
{ x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
{ x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
{ x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
];
const tilt = -45;
const legendSettings = {
visible: false
};
provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'
innerRadius='40%'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-circularchart3d': CircularChart3DComponent,
'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
'e-circularchart3d-series': CircularChart3DSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
{ x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
{ x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
{ x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
{ x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
],
tilt: -45,
legendSettings: {
visible: false
}
};
},
provide: {
circularchart3d: [PieSeries3D, CircularChartLegend3D]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Text and fill color mapping
The text and the fill color from the data source can be mapped to the 3D Circular Chart using pointColorMapping
in the series and name
in the data label, respectively.
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y' :pointColorMapping='pointColorMapping'
:dataLabel='dataLabel'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
const 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' }
];
const tilt = -45;
const legendSettings = {
visible: false
};
const pointColorMapping = 'fill';
const dataLabel = {
visible: true,
name: 'text'
};
provide('circularchart3d', [PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y' :pointColorMapping='pointColorMapping'
:dataLabel='dataLabel'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-circularchart3d': CircularChart3DComponent,
'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
'e-circularchart3d-series': CircularChart3DSeriesDirective
},
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' }
],
tilt: -45,
legendSettings: {
visible: false
},
pointColorMapping: 'fill',
dataLabel: {
visible: true,
name: 'text'
}
};
},
provide: {
circularchart3d: [PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Customization
Individual points in pie chart can be customized using the pointRender
event.
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings' :pointRender='pointRender'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3 },
{ x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 },
{ x: 'Apr', y: 13.5 }
];
const tilt = -45;
const legendSettings = {
visible: false
};
provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);
const pointRender = (args) => {
if ((args.point.x).indexOf('Apr') > -1) {
args.fill = '#f4bc42';
}
else if ((args.point.x).indexOf('Mar') > -1) {
args.fill = '#DE3D8A';
}
else if ((args.point.x).indexOf('Feb') > -1) {
args.fill = '#F7523F';
}
else {
args.fill = '#597cf9';
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-circularchart3d id="container" :tilt='tilt' :legendSettings='legendSettings' :pointRender='pointRender'>
<e-circularchart3d-series-collection>
<e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
</e-circularchart3d-series-collection>
</ejs-circularchart3d>
</div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-circularchart3d': CircularChart3DComponent,
'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
'e-circularchart3d-series': CircularChart3DSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3 },
{ x: 'Feb', y: 3.5 },
{ x: 'Mar', y: 7 },
{ x: 'Apr', y: 13.5 }
],
tilt: -45,
legendSettings: {
visible: false
}
};
},
provide: {
circularchart3d: [PieSeries3D, CircularChartLegend3D]
},
methods: {
pointRender: function (args) {
if ((args.point.x).indexOf('Apr') > -1) {
args.fill = '#f4bc42';
}
else if ((args.point.x).indexOf('Mar') > -1) {
args.fill = '#DE3D8A';
}
else if ((args.point.x).indexOf('Feb') > -1) {
args.fill = '#F7523F';
}
else {
args.fill = '#597cf9';
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>