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

show all datalabels in accumulation pie chart

Thread ID:

Created:

Updated:

Platform:

Replies:

141848 Jan 8,2019 07:25 AM UTC Jan 9,2019 09:31 AM UTC Angular - EJ 2 1
loading
Tags: Chart
Samir Modi
Asked On January 8, 2019 12:26 PM UTC

Hi Team,

I have couple of question regarding accumulation chart which i am using.

Question 1) I am using accumulation chart of type 'pie'. The problem is i am not able to see all datalabels by using enableSmartLabels property and position as Outside. 
Labels for green and black portion are not visible. Even in the exanple given on the site doesn't show all labels. Thanks in advance.





this.datalabel = { visible: true, name: 'text', position: 'Outside' };
this.enableSmartLabels = true;

<ejs-accumulationchart id="chart-container1" [tooltip]='tooltip' [title]='titleDemand' [titleStyle]='titleStyle' [enableSmartLabels]='enableSmartLabels'
[legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='statsDemandGrpData' xName='x' yName='y' [dataLabel]='datalabel'>e-accumulation-series>
e-accumulation-series-collection>
ejs-accumulationchart>


Question 2)  Also, in the second pie, if the number of items are more, i see the colors are being repeated which is not correct. Is there a way we can ensure all items have unique colors ? See below - 






Kalaimathi Chellaiah [Syncfusion]
Replied On January 9, 2019 09:31 AM UTC

Hi Samir, 
 
Greetings from Syncfusion. 
 
Query 1: I am using accumulation chart of type 'pie'. The problem is I am not able to see all data labels by using enable SmartLabels property and position as Outside. Labels for green and black portion are not visible. Even in the exanple given on the site doesn't show all labels ? 
We have analyzed the requested requirement. Currently we do not have support to achieve your requirement for place the label smartly, when it overlaps with each other, but we have logged a feature request on this. We are closing this incident now and it can be tracked through our feedback portal below.   
 
 
Please cast your vote to make it count. We will prioritize the features every release based on the demands.   
   
If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.   
 
Query  2: Also, in the second pie, if the number of items are more, I see the colors are being repeated which is not correct. Is there a way we can ensure all items have unique colors ? 
We have analyzed your requirement with attached screenshot. We can achieve your requirement using following ways, 
1)Palette is an array property of the series, we can customize the color of each points in pie by providing a custom color based on your choice.  
Code Snippet: 
app.component.html: 
<e-accumulation-series-collection> 
                <e-accumulation-series name='RIO' [dataSource]='data' xName='x' yName='y' [startAngle]="startAngle" [endAngle]="endAngle" innerRadius="0%" [dataLabel]="dataLabel" [palettes]='palettes'> </e-accumulation-series> 
            </e-accumulation-series-collection> 
app.component.ts: 
  //Using palettes for fill points 
    public palettes:string[] = ['red', 'green', '#ff0097', 'crimson', 'blue', 'darkorange', 'deepskyblue', 
        'mediumvioletred', 'violet', 'peru', 'gray', 'deeppink', 'navy']; 
 
 
2) And also we can map the colors to the chart from the dataSource using property poinColorMappingName. Consider the below code snippet.  
Code Snippet: 
app.component.html: 
<e-accumulation-series-collection> 
                <e-accumulation-series name='RIO' [dataSource]='data' xName='x' yName='y' [startAngle]="startAngle" [endAngle]="endAngle" innerRadius="0%" [dataLabel]="dataLabel" [pointColorMapping]= 'map'> </e-accumulation-series> 
            </e-accumulation-series-collection> 
pp.component.ts: 
  public data: Object[] = [ 
        { 'x': 'USA', y: 46, text: 'United States of America: 46', fill:'navy'}, 
/….some code here 
    ]; 
    //point color mapping to customize points 
    public map: Object = 'fill' 
 
 
 
Screenshot:  
 
Kindly revert us, if you need further assistance. 
 
Regards, 
Kalai 
 
 


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

;