I'm trying to build simple pie, doughnut chart in Syncfusion.
And after that I finally managed to display this chart properly, now I can't figure out what is the problem that dataLabel
's are not displaying with the chart.
Couldn't find anything in the docs, and even straight up copied examples are not working.
Here is my data sample:
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%"},
];
Here is the 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>
I received an answer to that on Syncfusion forum.
<Inject>
component should be nested in <AccumulationChartComponent>
.
Moving this line up is the answer in this case:
<AccumulationChartComponent
id='charts'
legendSettings={{ visible: true, background: 'white' }}
height={"500px"}
width={'500px'}
background={'transparent'}
>
<Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<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>
Details:
https://www.syncfusion.com/forums/176267/datalabel-in-pie-chart-is-not-displayed