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

Center text in the middle of the chart

Hi forum,

I'm currently evaluating Syncfusion as a replacement of our current JS library.

One of the requirements is that it needs to be possible to show a text in the middle of the chart (in the middle of the doughnut, to be precise). The text needs to stay there even if the chart is updated, resized or moved.

What would be the best way to accomplish this task?

Thanks for your assistance,
Oliver

3 Replies

DD Dharanidharan Dharmasivam Syncfusion Team November 3, 2016 11:18 AM UTC

Hi Oliver, 
 
Thanks for using Syncfusion product. 
 
We have analyzed your query. Using annotation, you can place the text in the middle of the chart and the text will be not be moved, even when the chart get resized. Kindly find the code snippet below, 

Code Snippet: 
JS: 

    <div id="annotationText" style="font-size:25px; display:none">2014 
    </div> 
 
     $("#container").ejChart({ 
        //... 
        annotations:[{ 
 
                     visible:true,  
 
                     content:"annotationText", 
 
                     region:"series" 
 
          }], 
        //... 
     }); 
 

Screenshot: 
 
For your reference we have attached the sample. Kindly find the sample from below location. 

For more information on annotation, kindly follow the link, 

Thanks, 
Dharani. 



OW Oliver Wirkus November 3, 2016 05:00 PM UTC

Awesome! Thanks for the example.
That's exactly what I need :)

BTW: Annotations don't seem to work when enable3D is set to true. Is that correct?


AB Akbar Basha K M Syncfusion Team November 4, 2016 07:24 AM UTC

Hi Oliver, 
Glad we could help! Yes, annotation has limitations and it is not supported in 3D Type charts. We have added this information in our UG document and it will be refreshed soon. 
Let us know if you need any further assistance.  
Thanks, 
Akbar Basha KM. 


Loader.
Live Chat Icon For mobile
Up arrow icon