Toggle Column Series On Click Of Custom Legends In Amcharts4 In Angular

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 lege

Solution 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();
          }
        }
      });