Get color assigned in chart

[Manolo Capdevila]

Hi,

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

Thanks

[Dharanidharan Dharmasivam]

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. 

 

 

[Manolo Capdevila]

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]

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. 

[Manolo Capdevila]

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]

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.