We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Label inside de chart

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%' >


It is rendering:

How can I place a Label inside the chart?

Many Thanks

1 Reply

SM Srihari Muthukaruppan Syncfusion Team January 15, 2020 12:18 PM UTC

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.  
Code Snippet: 
<AccumulationChartComponent animationComplete={this.onAnimationComplete.bind(this)} > 
<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. 
Srihari M 

Live Chat Icon For mobile
Up arrow icon