Search code examples
reactjsej2-syncfusionsyncfusion-chart

dataLabel in AccumulationChartComponent (pie chart) is not displaying

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>

Here is how my chart look like right now: enter image description here

Solution

  • 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