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

Subscribe to this post

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 -

Reply | Reply with quote

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.

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

Reply | Reply with quote

show all datalabels in accumulation pie chart

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US