Declined
Last Updated: 01 Feb 2021 10:14 by ADMIN
Dan
Created on: 25 Jan 2021 15:47
Category: Charts
Type: Bug Report
2
visibility toggle is broken when you use the [series] binding (Angular UI)

Expected: Clicking on an item in the legend is supposed to toggle it's visibility.

Using kendo-angular-charts 5.1.0, if you add a series input, this does not happen. A full, minimal reproduction of this issue is available At the StackBlitz link below. The top chart has no issues (hides series upon clicking) while the bottom does.

https://stackblitz.com/edit/angular-5it8qu?file=app%2Fapp.module.ts

Screenshots of above repro:

It appears that there is a line deep in the codebase that says:

const seriesComponent = this.seriesComponents.get(index);
if( !seriesComponent ){ return; }
seriesComponent.toggleVisibility();

And the seriesComponents array is empty when you use the [series] binding.

We even went so far as to bind to the legend click event and toggle the visibility myself, but it is 100% ignored.
It was something like:

public onLegendClick(event: LegendClickEvent){
  event.series.visibility = !event.series.visibility;
  event.source.refresh();
  event.source.changeDetector.markForCheck();
}

Calling refresh did redraw the chart, but it was still visible/enabled. Even though digging into it with ng.getComponent on the kendo-chart, and looking at the series, it clearly showed series[0].visible to be false.

I had to make an assumption on version for this ticket since the dropdown on the bug report doesn't list 5.1.0. I wouldn't mind tips on understanding how to match up your marketing version name with your npm version. I spent 20 minutes looking around for that, but your versioning doc and release history don't seem to have anything about the actual version numbers used by package management.

 

1 comment
ADMIN
Svetlin
Posted on: 01 Feb 2021 10:14

Hi Dan,

Thank you for the provided feedback and example.

The demonstrated behavior is caused by a limitation of the Chart when the series are declared as plain objects. Please check the following article on this topic which also provides a workaround for such use - case:

https://www.telerik.com/kendo-angular-ui/components/charts/elements/legend/#toc-inline-series

Please let me know in case any further information is required for this case.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.