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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Donut with text center

Thread ID:

Created:

Updated:

Platform:

Replies:

148258 Oct 11,2019 05:53 PM UTC Oct 17,2019 10:47 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Charts
Stefan
Asked On October 11, 2019 05:53 PM UTC

Hi,

Is it possible to have text in the center of a donut chart?
Is it possible to replace text on a donut with an icon from font-awesome or other icons.

Regards,

/Stefan



Srihari Muthukaruppan [Syncfusion]
Replied On October 14, 2019 09:06 AM UTC

Hi Stefan, 

Greetings from Syncfusion 

Please find the chart related query response. 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
Query #1: Is it possible to have text in the center of a donut chart ? 

We have analyzed your query. From that, we would like to let you know that we can add text element inside the donut using “animationComplete” event.  Please find the demo sample below. 


Query 2 : Is it possible to replace text on a donut with an icon from font-awesome or other icons ? 

We can replace the data label text with an icon using “template” property in data label. Based on your requirement, we have prepared a sample in EJ2. Please find the below sample and code snippet ,  
 
 
Screenshot: 
 
 
Code Snippet: 
 
[index.cshtml]: 
 
<div class="control-section" align='center'> 
    <ejs-accumulationchart id="container" title="Mobile Browser Statistics" animationComplete="animation"> 
         
        <e-accumulation-series-collection> 
            <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Revenue" innerRadius="40%"> 
                <e-accumulationseries-datalabel template="#template" visible="true"> 
                    <e-font fontWeight="600" color="red"></e-font> 
                </e-accumulationseries-datalabel> 
            </e-accumulation-series> 
        </e-accumulation-series-collection> 
    </ejs-accumulationchart> 
</div> 
 
<script> 
    var centerTitle = document.createElement('div'); 
    centerTitle.innerHTML = 'Expenses in Year'; 
    centerTitle.style.position = 'absolute'; 
    centerTitle.style.visibility = 'hidden'; 
    var count = 0; 
 
    function animation(args) { 
        centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width); 
        var rect = centerTitle.getBoundingClientRect(); 
        centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px'; 
        centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px'; 
        centerTitle.style.visibility = 'visible'; 
        let points = args.accumulation.visibleSeries[0].points; 
        for (var point of points) { 
            if (point.labelPosition === 'Outside' && point.labelVisible) { 
                var label = document.getElementById('container_datalabel_Series_0_text_' + point.index); 
                label.setAttribute('fill', 'black'); 
            } 
        } 
 
    } 
 
 
      
    document.getElementById('container').appendChild(centerTitle); 
</script> 
<script id="template"> 
    <div style="background:#f5f5f5; border: 1px solid black; padding: 3px 3px 3px 3px"> 
        <div><i class="fa fa-bell" aria-hidden="true"></i></div> 
    </div> 
</script> 
} 
}  
  
To know more information about the tooltip template of chart. Please refer our UG link shown below 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
 
Let me know if you need further assistance. 

Regards,  
Srihari.  


Stefan
Replied On October 16, 2019 10:55 AM UTC

Hi,

Works great but when decreasing the width of the display the text is not centered anymore.
The image attached is from the sample you provided.

Regards,

Stefan



Srihari Muthukaruppan [Syncfusion]
Replied On October 17, 2019 10:47 AM UTC

Hi Stefan,  

Sorry for the inconvenience.  

We have validated your query. From that, we suggest you to refresh the chart while resizing using the “resized” event of the chart. Based on that we have prepared a sample and also provided the code snippet for your reference. 
 
    
Code Snippet:     
[index.cshtml]: 
 
    <ejs-accumulationchart id="container" title="Mobile Browser Statistics" width="80%" load="load" animationComplete="animation" resized="resized"> 
       <e-accumulation-series-collection> 
            <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Revenue" innerRadius="60%"> 
            </e-accumulation-series> 
        </e-accumulation-series-collection> 
    </ejs-accumulationchart> 
<script>  
var resized = function (args) { 
        args.accumulation.refresh(); 
    }                
</script> 
  
Screenshot:   
Before resizing 
After resizing 
 
 
 
   
Let me know, if you have any concerns.    
    
Regards,    
Srihari 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon