Label inside de chart

[Oscar Ramos]

Hi, I have the following code. 

<AccumulationChartComponent background="transparent" >

            <AccumulationSeriesCollectionDirective >

                <AccumulationSeriesDirective palettes={this.palettes} dataSource={[{ x: 'Labour', y: 90, text: '18%' }, { x: 'Vacio', y: 10 }]} xName='x' yName='y' innerRadius='90%' >

                </AccumulationSeriesDirective>

            </AccumulationSeriesCollectionDirective>

        </AccumulationChartComponent>;

It is rendering:

How can I place a Label inside the chart?

EJ: 

Many Thanks

[Srihari Muthukaruppan]

Hi Oscar, 

  

We have analyzed your query. From that we would like to let you know that we can achieve your requirement using “animationComplete” event in the accumulation chart. Based on your requirement we have prepared a sample for your reference. In which center title has been positioned after animation complete. Please find the below sample, code snippet and screenshot.  

  

Sample : https://stackblitz.com/edit/react-odcjmz-4rudyx?file=index.js 

  

Code Snippet: 

<AccumulationChartComponent animationComplete={this.onAnimationComplete.bind(this)} > 

</AccumulationChartComponent> 

<div id="center_title" style={{ visibility: 'hidden', position: 'absolute'}}>72%</div> 

  

    onAnimationComplete(args) { 

        let centerTitle = document.getElementById('center_title'); 

        centerTitle.style.fontSize = '32px'; 

        let rect = centerTitle.getBoundingClientRect(); 

        centerTitle.style.top = (args.accumulation.origin.y + args.accumulation.element.offsetTop - (rect.height / 2)) + 'px'; 

        centerTitle.style.left = (args.accumulation.origin.x + args.accumulation.element.offsetLeft - (rect.width / 2)) + 'px'; 

        centerTitle.style.visibility = 'visible'; 

    }; 

  

Screenshot : 

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M