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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

for pie chart show data lable in % value

Thread ID:





124133 May 19,2016 09:34 AM UTC May 20,2016 11:17 AM UTC JavaScript 3
Tags: ejChart
kalpa serashiya
Asked On May 19, 2016 09:34 AM UTC

now  connector line is coming for pie chart .
     I want to show datalable with  value in pecentage
if i have series like this.

tell me solution if any 

Saravana Kumar Kanagavel [Syncfusion]
Replied On May 19, 2016 12:22 PM UTC

Hi Kalpa, 
Thanks for contacting Syncfusion Support. 
We have analyzed your query and created a sample based on your requirement. This can be achieved by “displayTextRendering” event. 
Please follow the code example below 
$(function () 
    function text(sender) {  //displayTextRendering event triggered 
        sender.data.text = sender.data.text + "%"; 
In the above code, we are triggering “diplayTextRendering” event. In the event, we are added the percentage with data label text. 
We have also made a sample for your reference and attached in the below location. 
Find the output of the sample below 

Please let us know if you have any concern.

Saravana Kumar K

kalpa serashiya
Replied On May 19, 2016 05:20 PM UTC

but i have to calculate   % value according to y axis series value   in pie chart
at time of rendering data label

Sanjith Kesavan [Syncfusion]
Replied On May 20, 2016 11:17 AM UTC

Hi Kalpa, 
We have analyzed your query and modified the sample as per your requirement. In the sample, we have calculated total of all y-values given for the chart and from that total, we have calculated percentage for each y-values and assigned it to the point text. Please find the below code example. 
function text(sender) 
           if (total==0) { 
               for (i = 0; i < sender.model.series[0].points.length; i++) { 
                   total = total + sender.model.series[0].points[i].y; 
           sender.data.text = ((parseFloat(sender.data.text) / total) * 100).toFixed(2) + "%"; 
In the above code, we have subscribed the “displayTextRendering” event and modified the datelabel text with the calculated percentage value. Please find the below screenshot of the chart.  
In the below link, we have attached the modified sample for your reference.  


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