Chart does not reflect active entries unless I set it to array.slice() in the markup -- this will disable selecting points - Stackblitz inside

Question

On the line chart there is the select event where you can select points & legend items.Line chart has activeElements input property which takes an array of the active elements.

Line chart will not react to changes to the activeElements array unless you enter it in the markup using .slice() either as a local variable OR redux state object:

[activeEntries]="array.slice()"
[activeEntries]="(array | async).slice()"

This works but then the (select) event is not triggered when you click on points anymore.

If you however remove .slice() -- you will be able to select both -- but the chart will no longer react to activeEntries changes no matter what.

This includes having the activeEntries a redux state object where the whole state is a new object on each change -- calling changeDetection everywhere does not affect it at all.

Here's a stackblitz: https://stackblitz.com/edit/angular-ngx-charts-testing-stuff?file=src/ -- stackblitz.

I have commented the code & markup everywhere so you can understand what I'm trying to do in the code.

I'd like to be able to click on points + legend when using .slice() or have the chart react to changes to activeEntries array.

Answer 1

It actually takes a whole lot more to highlight the active entries and it was purely a coincidence that calling .slice worked at all.

What I needed wasn't actually a feature yet.