dataLabel in pie chart is not displayed

[Jaroslaw]

Hello,

Im new to this tool and I'm trying to make simple pie, doughnut chart.
Now after the chart is displayed properly, there are no labels for some reason
Even straight up copied examples from docs are not working and displaying properly so I don't really know where to go from here, appreciate any help.

This is my sample data:

const sample = [

{ name: "label", value: 45, text: "45%"},

{ name: "label1", value: 10, text: "30%"},

{ name: "label2", value: 20, text: "10%"},

{ name: "label3", value: 5, text: "5%"},

];

This is my component setup:

<AccumulationChartComponent

id='charts'

legendSettings={{ visible: true, background: 'white' }}

height={"500px"}

width={'500px'}

background={'transparent'}

>

<AccumulationSeriesCollectionDirective>

<Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip]} />

<AccumulationSeriesDirective

dataSource={sample}

xName='name'

yName='value'

innerRadius='40%'

startAngle={0}

endAngle={360}

radius="70%"

explode

explodeOffset="10%"

explodeIndex={2}

dataLabel={{

visible: true,

name: 'name',

position: 'Outside',

}}

>

AccumulationSeriesDirective>

AccumulationSeriesCollectionDirective>

AccumulationChartComponent>

[Durga Gopalakrishnan]

Hi Jaroslaw,

 

Greetings from Syncfusion.

 

We have ensured your reported scenario with attached snippet and noted that Inject tag is included inside AccumulationSeriesCollectionDirective tag, so data labels are not rendered. We have attached modified sample for your reference.

 

Sample : https://stackblitz.com/edit/react-srlcpk

 

Kindly revert us if you have any concerns.

 

Regards,

Durga Gopalakrishnan.