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.
Unfortunately, activation email could not send to your email. Please try again.

Center text in the middle of the chart

Thread ID:

Created:

Updated:

Platform:

Replies:

127206 Nov 2,2016 01:11 PM Nov 4,2016 03:24 AM JavaScript 3
loading
Tags: ejChart
Oliver Wirkus
Asked On November 2, 2016 01:11 PM

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

Dharanidharan Dharmasivam [Syncfusion]
Replied On November 3, 2016 07:18 AM

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. 


Oliver Wirkus
Replied On November 3, 2016 01:00 PM

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?

Akbar Basha K M [Syncfusion]
Replied On November 4, 2016 03:24 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;