Center text in the middle of the chart

[Oliver Wirkus]

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]

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. 

Sample Link: http://jsplayground.syncfusion.com/rz1xzwnz  

For more information on annotation, kindly follow the link, 

UG Link: https://help.syncfusion.com/js/chart/annotations  

Thanks, 

Dharani. 

[Oliver Wirkus]

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]

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.