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.

for pie chart show data lable in % value

Thread ID:

Created:

Updated:

Platform:

Replies:

124133 May 19,2016 05:34 AM May 20,2016 07:17 AM JavaScript 3
loading
Tags: ejChart
kalpa serashiya
Asked On May 19, 2016 05:34 AM

hi
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 
Thanks


Saravana Kumar Kanagavel [Syncfusion]
Replied On May 19, 2016 08:22 AM

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 
[JS] 
$(function () 
    { 
        $("#container").ejChart( 
      {  
          displayTextRendering:"text" 
      }); 
    }); 
 
    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.

Regards,
Saravana Kumar K
 


kalpa serashiya
Replied On May 19, 2016 01:20 PM

 thanks 
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 07:17 AM

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.  
 
Regards, 
Sanjith. 


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.

;