1. Home
  2. Forum
  3. React - EJ 2
  4. How to add a center text in a doughnut chart

How to add a center text in a doughnut chart

Hello I would like to add a text in the center of the doughnut (e.g. Total count ) using syncFusion in my functional component. I am able to generate the Doughnut however unable to add text in the center. Can someone give me a example demoing the same in functional component of React JS. similar to the image displayed below. 




Thanks in Advance.


4 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team June 16, 2022 02:26 PM UTC

Hi Randhir,

 

Greetings from Syncfusion.

 

We suggest you to use annotation to achieve your required scenario. Please check with the below snippet and sample.

 

<AccumulationChartComponent >     <AccumulationAnnotationsDirective>

        <AccumulationAnnotationDirective content="<div>$70</div>" region='Series' coordinateUnits='Pixel' x='50%' y='50%'>

        </AccumulationAnnotationDirective>

      </AccumulationAnnotationsDirective> </AccumulationChartComponent>


 

 

 

 

Kindly revert us if you have any concerns.

 

Regards,

Durga Gopalakrishnan.


Marked as answer
RK Randhir Kumar Singh replied to Durga Gopalakrishnan June 17, 2022 10:33 AM UTC

Hi Durga, 

Thanks for the response. I was able to get the text in center using Annotation . 1 quick question how do I make my text multiline. If I add a </br> tag in div of content . The text in the next line is not centered. Please see the image below. Also how do I change the font Size I tried passing style attribute in the div tag but it doesn't seems to work. 


Thanks again. 



<div>Total</br>70</div>

RK Randhir Kumar Singh June 17, 2022 08:53 PM UTC

Hi  Durga Gopalakrishnan , I was able to add text in the center , how do I increase the width of the legend. I tried to alter the legend setting but it doesn't works.  Looking to hear back from you. 

Thanks 

Randhir 




DG Durga Gopalakrishnan Syncfusion Team June 20, 2022 12:13 PM UTC

Hi Randhir,
You can increase the height of legend using legendSettings height property. As per your attached screenshot, legend count is small, increasing the height will place the legends from top and spacing will be displayed in bottom. 
You can also specify padding, shapeWidth, shapeHeight and font of legend text to increase the height, so that legends will be displayed for full height which is equivalent to doughnut height.
UG : https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/
Please check with the below API reference and documentation links.
Regards,
Durga Gopalakrishnan.

Loader.
Up arrow icon