Toggle column series on click of custom legends in amcharts4 in Angular

Question

here is a stackblitz link of my Angular app with amchart. Amchart Angular app

For UX reasons I am keeping the chart stack colors same. Now in code if am using amcharts default legend (line 225 of code) everything works fine. On clicking on legends it filter the stack chart accordingly, but again for UX reasons am using custom item for legends (line 227 to 235 in code) and here when I click on legend the stack columns are not getting filtered accordingly. How to achieve amchart's default legend behaviour in this scenario?

Answer 1

I figured it out, added following changes in my code and I achieved the desired result:

legend.itemContainers.template.clickable = true;

      legend.itemContainers.template.togglable = false;

      legend.itemContainers.template.events.on('hit', (ev) => {
        // console.log(ev);
        if (ev.target.dataItem.dataContext['name'] === 'Success') {
          series2.hide();
          series3.hide();
        }
        if (ev.target.dataItem.dataContext['name'] === 'Failed') {
          series1.hide();
          series3.hide();
        }
        if (ev.target.dataItem.dataContext['name'] === 'Progress') {
          series1.hide();
          series2.hide();
        }
        if (ev.target.dataItem.dataContext['name'] === 'All') {
          if (series1.isHidden) {
            series1.show();
          }
          if (series2.isHidden) {
            series2.show();
          }
          if (series3.isHidden) {
            series3.show();
          }
        }
      });