How to chage ngx-bar chart color using customColor?

Question

I am trying to change the colour of my ngx bar chart by calling a function at [customColor] property but it is going into loop even though by animation mode is off.

I had referred to the following StackOverflow answer and even on a comment section, someone is facing the same issue.

How to use Ngx-Charts customColor function

setTimeOut Handler error

I had console the text msg 'custom colours called' inside CustomColor() function. (which I called at [customColor]=CustomColor())

apart from it, it's working absolutely fine but not sure why it is going into loop ?? Because of the same, my system get down after a couple of minutes

console msg

would really appreciate any help.

Can we see some relevant code? – Cameron Jul 14 '20 at 12:12 — Cameron, Jul 14 '20 at 12:12

score 0 · Answer 1 · answered Jul 20 '20 at 18:23

We should avoid binding function to the property, as it gets trigger every time whenever change detection happens.

I would recommend fetching custom colors to a public array in ngOnit and bind this array to [customColor] property.

customColors: any[] = [];
constructor() {}

ngOnInit() {
  this.customColors = this.getCustomColors();
}

getCustomColors() {
  //retrun customColor;
}

// In template
<ngx-charts-bar-vertical
  [animations]="barAnimations"
  [customColors]="customColors"
  ...
</ngx-charts-bar-vertical>

How to chage ngx-bar chart color using customColor?

1 Answers1