Pie dough nut in Vue Accumulation chart component

25 Sep 202424 minutes to read

Pie Chart

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 setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } 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' }
];

provide('accumulationchart', [PieSeries]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<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 { 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: '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>

Radius Customization

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 setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } 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' }
];

provide('accumulationchart', [PieSeries]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<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 {  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: '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>

Pie Center

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 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' :radius='radius'
          xName='x' yName='y' :dataLabel='dataLabel' name='Browser' innerRadius='0%'> </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, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";


const 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%' }
];
const dataLabel = {
  visible: true,
  position: 'Inside', name: 'text',
  font: {
    fontWeight: '600'
  }
}
const enableAnimation = false;
const legendSettings = {
  visible: false,
};
const tooltip = { enable: false, format: '${point.x} : <b>${point.y}%</b>' };
const startAngle = '0';
const endAngle = '360';
const radius = '70%';
const center = { x: '50%', y: '50%' };
const title = "Mobile Browser Statistics";

provide('accumulationchart', [PieSeries, AccumulationDataLabel]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart 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' :radius='radius'
          xName='x' yName='y' :dataLabel='dataLabel' name='Browser' innerRadius='0%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel } 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: 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'
        }
      },
      enableAnimation: false,
      legendSettings: {
        visible: false,
      },
      tooltip: { enable: false, format: '${point.x} : <b>${point.y}%</b>' },
      startAngle: '0',
      endAngle: '360',
      radius: '70%',
      center: { x: '50%', y: '50%' },
      title: "Mobile Browser Statistics"
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationDataLabel]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Various Radius Pie Chart

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;' :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 setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, AccumulationDataLabel, PieSeries } from "@syncfusion/ej2-vue-charts";

const data = [
  { 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' }
];
const radius = 'r';
const legendSettings = { visible: true };
const dataLabel = { visible: true, position: 'Outside', name: 'x' };
const tooltip = {
  enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>'
};
const enableAnimation = true;
const enableSmartLabels = true;

provide('accumulationchart', [PieSeries, AccumulationDataLabel]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" ref="pie" style='display:block;' :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 { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationDataLabel, 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 {
      data: [
        { 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, AccumulationDataLabel]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Doughnut Chart

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 setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } 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' }
];

provide('accumulationchart', [PieSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<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 { 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: '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>

Start and End angles

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 setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } 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' }
];

provide('accumulationchart', [PieSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<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 { 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: '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>

Color and Text Mapping

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 setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationDataLabel } 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 datalabel = { visible: true, name: 'text' };
const pointColorMapping = 'fill';

provide('accumulationchart', [PieSeries, AccumulationDataLabel]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<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 { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel } 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: '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>

Border Radius

You can create rounded corners for each slice using the borderRadius option, giving the chart a modern and polished look.

<template>
  <div id="app">
    <ejs-accumulationchart id='chartcontainer' width='92%' :title='title' :legendSettings='legendSettings'
       :enableAnimation='enableAnimation'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' :startAngle='startAngle' :endAngle='endAngle' :radius='radius'
          xName='x' yName='y' name='Browser' innerRadius='60%' borderRadius='8'> </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, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
{ 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' }
];
const enableAnimation = true;
const legendSettings = {
  visible: false,
};
const startAngle = '0';
const endAngle = '360';
const radius = '70%';
const title = "Mobile Browser Statistics";

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id='chartcontainer' width='92%' :title='title' :legendSettings='legendSettings' :tooltip='tooltip'
       :enableAnimation='enableAnimation'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' :startAngle='startAngle' :endAngle='endAngle' :radius='radius'
          xName='x' yName='y' :dataLabel='dataLabel' name='Browser' innerRadius='60%' borderRadius='8'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } 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: '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' }
      ],
      enableAnimation: true,
      legendSettings: {
        visible: false,
      },
      startAngle: '0',
      endAngle: '360',
      title: "Mobile Browser Statistics"
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Patterns

You can apply different patterns to the pie slices using the applyPattern property in the series and the pointRender event.

<template>
  <div id="app">
    <ejs-accumulationchart id='chartcontainer' width='92%' :title='title' :legendSettings='legendSettings'
       :enableAnimation='enableAnimation'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' :startAngle='startAngle' :endAngle='endAngle' :radius='radius'
          xName='x' yName='y' name='Browser' innerRadius='60%' borderRadius='8'> </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, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
{ 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' }
];
const enableAnimation = true;
const legendSettings = {
  visible: false,
};
const startAngle = '0';
const endAngle = '360';
const radius = '70%';
const title = "Mobile Browser Statistics";

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id='chartcontainer' width='92%' :title='title' :legendSettings='legendSettings' :tooltip='tooltip'
       :enableAnimation='enableAnimation'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' :startAngle='startAngle' :endAngle='endAngle' :radius='radius'
          xName='x' yName='y' :dataLabel='dataLabel' name='Browser' innerRadius='60%' borderRadius='8'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } 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: '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' }
      ],
      enableAnimation: true,
      legendSettings: {
        visible: false,
      },
      startAngle: '0',
      endAngle: '360',
      title: "Mobile Browser Statistics"
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Multi-level pie chart

You can achieve a multi-level drill down in pie and doughnut charts using pointClick event. If user clicks any point in the chart, that corresponding data will be shown in the next level and so on based on point clicked.

You can also achieve drill-up (back to the initial state) by using chartMouseClick event. In below sample, you can drill-up by clicking back button in the center of the chart.

<template>
    <div id="app">
    <div>
        <div id="link">
            <a id="category" @click="onClick" style="visibility:hidden; display:inline-block">Sales by Category</a>
            <p style="visibility:hidden; display:inline-block" id="symbol"> >> </p>
            <p id="text" style="display:inline-block;"></p>
        </div>
        <button type="button" id="back" style="visibility: hidden;" @click="onClick">Back</button>
        <ejs-accumulationchart ref="pie" id="container" style='display:block;' :legendSettings="legendSettings" :enableSmartLabels='enableSmartLabels' :title="title" :textRender="onTextRender" :chartMouseClick="onChartMouseClick">
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='data' xName='x' yName='y' :startAngle="startAngle" :endAngle="endAngle" :innerRadius="innerRadius" radius="70%" :dataLabel="dataLabel" :explode="isExplode" explodeOffset='10%' :explodeIndex='explodeIndex'>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
    </div>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";

import { extend } from '@syncfusion/ej2-base';
import { getElement, indexFinder, AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationChartComponent as EjsAccumulationchart,
    AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries
 } from "@syncfusion/ej2-vue-charts";

 const pie = ref(null);

const innerRadius = ref('0%');
const innerChart = ref(false);
const enableSmartLabels = ref(false);

const data = ref([
    { x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 },
    { x: 'Minivan', y: 23 }
]);

const suvs = ref([{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },
{ x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }]);

const cars = ref([{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 },
{ x: 'Tata', y: 10 },
{ x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }]);

const pickups = ref([{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },
{ x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }]);

const minivans = ref([{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 },
{ x: 'Jaguar', y: 9 },
{ x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }]);

const legendSettings = ref({
    visible: false,
});

const dataLabel = ref({
    visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '5%' }, font: { size: '14px', color: 'white' }
});

const startAngle = ref(0);

const explodeIndex = ref(2);

const isExplode = ref(false);

const endAngle = ref(360);

const title = ref('Automobile Sales by Category');

provide('accumulationchart',  [AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]);

const onTextRender = (args) => {
    args.text = args.point.x + ' ' + args.point.y + ' %';
};

const onChartMouseClick = (args) => {
    let index = indexFinder(args.target);
    isExplode.value = false;
    if (getElement('container_Series_' + index.series + '_Point_' + index.point) && !innerChart.value) {
        innerRadius.value = '30%';
        switch (index.point) {
            case 0:
                data.value = suvs.value;
                title.value = 'Automobile Sales in the SUV Segment';
                getElement('text').innerHTML = 'SUV';
                break;
            case 1:
                data.value = cars.value;
                title.value = 'Automobile Sales in the Car Segment';
                getElement('text').innerHTML = 'Car';
                break;
            case 2:
                data.value = pickups.value;
                title.value = 'Automobile Sales in the Pickup Segment';
                getElement('text').innerHTML = 'Pickup';
                break;
            case 3:
                data.value = minivans.value;
                title.value = 'Automobile Sales in the Minivan Segment';
                getElement('text').innerHTML = 'Minivan';
                break;
        }
        let dataLabel = extend({}, dataLabel.value);
        dataLabel.position = 'Outside';
        dataLabel.font.color = 'black';
        dataLabel.value = dataLabel;
        let legendSettings = legendSettings.value;
        legendSettings.visible = false;
        legendSettings.value = legendSettings;
        enableSmartLabels.value = true;
        getElement('category').style.visibility = 'visible';
        getElement('symbol').style.visibility = 'visible';
        getElement('text').style.visibility = 'visible';
        innerChart.value = true;
    }
    if (args.target.indexOf('back') > -1) {
        data.value = [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }]
        isExplode.value = false;
        let dataLabel = extend({}, dataLabel.value);
        dataLabel.position = 'Inside';
        dataLabel.font.color = 'white';
        dataLabel.value = dataLabel;
        let legendSettings = legendSettings.value;
        legendSettings.visible = false;
        legendSettings.value = legendSettings;
        enableSmartLabels.value = false;
        innerRadius.value = '0%';
        getElement('category').style.visibility = 'hidden';
        getElement('symbol').style.visibility = 'hidden';
        getElement('text').style.visibility = 'hidden';
        innerChart.value = false;
    }
};

const onClick = (e) => {
    isExplode.value = false;
    data.value = [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }]
    let dataLabel = extend({}, dataLabel.value);
    dataLabel.position = 'Inside';
    dataLabel.font.color = 'white';
    dataLabel.value = dataLabel;
    let legendSettings = legendSettings.value;
    legendSettings.visible = false;
    legendSettings.value = legendSettings;
    enableSmartLabels.value = false;
    innerRadius.value = '0%';
    getElement('category').style.visibility = 'hidden';
    getElement('symbol').style.visibility = 'hidden';
    getElement('text').style.visibility = 'hidden';
    e.target.style.visibility = 'hidden';
    getElement('symbol').style.visibility = 'hidden';
    getElement('text').style.visibility = 'hidden';
    innerChart.value = false;
};

provide('accumulationchart',  [AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]);


</script>

<style scoped>
#category:hover {
    cursor: pointer;
}
</style>
<template>
    <div id="app">
    <div>
        <div id="link">
            <a id="category" @click="onClick" style="visibility:hidden; display:inline-block">Sales by Category</a>
            <p style="visibility:hidden; display:inline-block" id="symbol"> >> </p>
            <p id="text" style="display:inline-block;"></p>
        </div>
        <button type="button" id="back" style="visibility: hidden;" @click="onClick">Back</button>
        <ejs-accumulationchart ref="pie" id="container" style='display:block;' :legendSettings="legendSettings" :enableSmartLabels='enableSmartLabels' :title="title" :textRender="onTextRender" :chartMouseClick="onChartMouseClick">
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='data' xName='x' yName='y' :startAngle="startAngle" :endAngle="endAngle" :innerRadius="innerRadius" radius="70%" :dataLabel="dataLabel" :explode="isExplode" explodeOffset='10%' :explodeIndex='explodeIndex'>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
    </div>
    </div>
</template>
<script>

import { extend } from '@syncfusion/ej2-base';
import { getElement, indexFinder, AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationChartComponent,
    AccumulationSeriesCollectionDirective, AccumulationSeriesDirective
 } from "@syncfusion/ej2-vue-charts";


export default {
name: "App",
components: {
"ejs-accumulationchart":AccumulationChartComponent,
"e-accumulation-series-collection":AccumulationSeriesCollectionDirective,
"e-accumulation-series":AccumulationSeriesDirective,

},

  data() {
    return {
      innerRadius: '0%',
    innerChart: false,
    enableSmartLabels: false,
    data: [
        { x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 },
        { x: 'Minivan', y: 23 }
    ],
    suvs: [{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },
    { x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }],

    cars: [{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 },
    { x: 'Tata', y: 10 },
    { x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }],

    pickups: [{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },
    { x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }],

    minivans: [{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 },
    { x: 'Jaguar', y: 9 },
    { x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }],

    legendSettings: {
        visible: false,
    },
    dataLabel: {
        visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '5%' }, font: { size: '14px', color: 'white' }
    },
    startAngle: 0,
    explodeIndex: 2,
    isExplode: false,
    endAngle: 360,
    title: 'Automobile Sales by Category'
    }
  },
  provide: {
     accumulationchart: [AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]
  },
   methods: {
    onTextRender: function (args) {
        args.text = args.point.x + ' ' + args.point.y + ' %';
    },
    onChartMouseClick: function (args) {
        let index = indexFinder(args.target);
        this.isExplode = false;
        if (document.getElementById('container_Series_' + index.series + '_Point_' + index.point) && !this.innerChart) {
            this.innerRadius = '30%';
            switch (index.point) {
                case 0:
                    this.data = this.suvs;
                    this.title = 'Automobile Sales in the SUV Segment';
                    document.getElementById('text').innerHTML = 'SUV';
                    break;
                case 1:
                    this.data = this.cars;
                    this.title = 'Automobile Sales in the Car Segment';
                    document.getElementById('text').innerHTML = 'Car';
                    break;
                case 2:
                    this.data = this.pickups;
                    this.title = 'Automobile Sales in the Pickup Segment';
                    document.getElementById('text').innerHTML = 'Pickup';
                    break;
                case 3:
                    this.data = this.minivans;
                    this.title = 'Automobile Sales in the Minivan Segment';
                    document.getElementById('text').innerHTML = 'Minivan';
                    break;
            }
            let dataLabel = extend({}, this.dataLabel);
            dataLabel.position = 'Outside';
            dataLabel.font.color = 'black';
            this.dataLabel = dataLabel;
            let legendSettings = this.legendSettings;
            legendSettings.visible = false;
            this.legendSettings = legendSettings;
            this.enableSmartLabels = true;
            document.getElementById('category').style.visibility = 'visible';
            document.getElementById('symbol').style.visibility = 'visible';
            document.getElementById('text').style.visibility = 'visible';
            this.innerChart = true;
        }
        if (args.target.indexOf('back') > -1) {
            this.data = [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }]
            this.isExplode = false;
            let dataLabel = extend({}, this.dataLabel);
            dataLabel.position = 'Inside';
            dataLabel.font.color = 'white';
            this.dataLabel = dataLabel;
            let legendSettings = this.legendSettings;
            legendSettings.visible = false;
            this.legendSettings = legendSettings;
            this.enableSmartLabels = false;
            this.innerRadius = '0%';
            getElement('category').style.visibility = 'hidden';
            document.getElementById('symbol').style.visibility = 'hidden';
            document.getElementById('text').style.visibility = 'hidden';
            this.innerChart = false;
        }
    },
    onClick: function (e) {
        this.isExplode = false;
        this.data = [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }]
        let dataLabel = extend({}, this.dataLabel);
        dataLabel.position = 'Inside';
        dataLabel.font.color = 'white';
        this.dataLabel = dataLabel;
        let legendSettings = this.legendSettings;
        legendSettings.visible = false;
        this.legendSettings = legendSettings;
        this.enableSmartLabels = false;
        this.innerRadius = '0%';
        getElement('category').style.visibility = 'hidden';
        document.getElementById('symbol').style.visibility = 'hidden';
        document.getElementById('text').style.visibility = 'hidden';
        e.target.style.visibility = 'hidden';
        document.getElementById('symbol').style.visibility = 'hidden';
        document.getElementById('text').style.visibility = 'hidden';
        this.innerChart = false;
    },
  }
  };

</script>

<style scoped>
#category:hover {
    cursor: pointer;
}
</style>