Get color assigned in chart

Manolo Capdevila

Asked On February 18, 2019 06:38 PM UTC

Hi,

In Doughnut chart, How can I get the color assigned to a specific value of serie?

Thanks

Reply | Reply with quote

Dharanidharan Dharmasivam [Syncfusion]

Replied On February 19, 2019 03:45 PM UTC

Hi Manolo,

Greetings from Syncfusion.

We have analyzed your requirement. You can get the color assigned to each point using the pointRender event. This event will be triggered for each point. Find the code snippet below to achieve this requirement.

<ejs-accumulationchart (pointRender)='pointRender($event)' >

Other configurations

</ejs-accumulationchart>

public pointRender(args: IAccPointRenderEventArgs): void {

console.log(args.fill)

}

We have displayed the color in console window. You can change this with respect to your scenario.

Sample: https://stackblitz.com/edit/angular-cg6mic?file=default-pie.component.ts

Thanks,

Dharani.

Reply | Reply with quote

Manolo Capdevila

Replied On February 22, 2019 08:55 AM UTC

Hi,

Sorry, I explain bad.

I need get each colour assigned in a serie. So, I can set this color in other labels.

But I can get access to pallete property

Thanks

Reply | Reply with quote

Kalaimathi Chellaiah [Syncfusion]

Replied On February 22, 2019 11:45 AM UTC

Hi Manolo,

Thanks for using Syncfusion products.

We have analyzed your query and prepared stackblitz sample for your requirement. By using ` textRender` event you can get current label’s series point color in event argument.

Code Snippet:

Sample link: https://stackblitz.com/edit/angular-ckybpl?file=donut.component.ts

Kindly revert us back, If it is not your requirement.

Regards,

Kalai.

Reply | Reply with quote

Manolo Capdevila

Replied On February 22, 2019 01:57 PM UTC

Hi,

It is not my requirement...

In your example, I need get, for example, the color assigned to "Labour" data.

So, in label out of the chart, I can set the same color.

Thanks

Reply | Reply with quote

Dharanidharan Dharmasivam [Syncfusion]

Replied On February 25, 2019 05:36 AM UTC

Hi Manolo,

Thanks for the update. We have analyzed your requirement, and this can be achieved using pointRender event and textRender event. Using the point render event, we can get the color assigned to each point and using the textRender event, assign the colors to each data label. Find the code snippet below to achieve this.

[donut.html]

<ejs-accumulationchart pointRender)='pointRender($event)' (textRender)='textRender($event)'>

</ejs-accumulationchart>

[donut.component.ts]

Declare a public variable to store the colors obtained in pointRender event

public colorCollection = [];

public pointRender(args: IAccPointRenderEventArgs): void {

this.colorCollection.push(args.fill)

}

public textRender(args): void{

Assigned the color obtained in point render event

args.font.color = this.colorCollection[this.count];

this.count ++;

};

Screenshot:

Sample: https://stackblitz.com/edit/angular-ckybpl-zsz9pn?file=donut.component.ts

Thanks,

Dharani.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
142763	Feb 18,2019 06:38 PM UTC	Feb 25,2019 05:36 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US