The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular

Question

I have a range slider and bar graph. I am trying to change the color of bar graph using range slider, i am able to successfully change the color of bar graph using slider, but the data of the bar graph is not shown properly. https://stackblitz.com/edit/angular-ivy-wjpkcr

Answer 1

So I found the issue, but you will have to work a little bit on it to be fully functional.
it appears that when you set [datasets]="getBarChartData()" the chart is trying to render but is stuck in a loop because the value of the background color is infinitely changing inside getBarChartData(), note that you have a two way binding in your slider:

<ng5-slider [(value)]='value' [(highValue)]='highValue' [options]='options'>

and you can't rely on that to properly update your chart.
What I did is, I added a valueChange event to the slider and update the chart whenever a value changes in the slider.

<ng5-slider (valueChange)="logValue($event)" [(value)]='value' [(highValue)]='highValue' [options]='options'>

I also added ngOnInit() to properly initialize dataValues
link to demo: link