show all datalabels in accumulation pie chart

[Samir Modi]

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]

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.   

 

https://www.syncfusion.com/feedback/4201/  

 

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']; 

 

Sample: https://stackblitz.com/edit/angular-xczduh?file=src%2Fapp%2Fapp.component.ts 

 

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' 

 

 

Sample: https://stackblitz.com/edit/angular-4z7fbt?file=src%2Fapp%2Fapp.component.ts 

 

Screenshot:  

 

Kindly revert us, if you need further assistance. 

 

Regards, 

Kalai