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

Get color assigned in chart

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
loading
Tags: 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

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. 
 
Thanks, 
Dharani. 
 
 


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

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: 

 
 



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

Regards, 
Kalai. 


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

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: 
 
 
 
Thanks, 
Dharani. 


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

;