How to disable and enable legend items in highcharts

Question

Trying to disable legend items in highcharts, But not able to working. Example :

If I click Movie1 or Movie2 legend, only Movie1 and Movie2 should be enabled others Game1 and Game2 should be disabled.

If I click Game1 or Game2 legend, only Game1 and Game2 should be enabled others Movie1 and Movie2 should be disabled.

How to do it? How to use this.visible=false; for legend items?

    series: {
     events: {
     legendItemClick: function(e) {  console.log(this.name);
      const series = this;
      const chart = series.chart;
      const hasChangedOpacity = series.hasChangedOpacity;
      
      if(this.name == 'Movie1' || this.name == 'Movie2'){ 
        this.name.Movie1 = true; //enabled
        this.name.Movie2 = true; //enabled
        this.name.Game1 = false; //disabled
        this.name.Game2 = false; //disabled
        
      }
      if(this.name == 'Game1' || this.name == 'Game2'){
        this.name.Movie1 = false; //disabled
        this.name.Movie2 = false; //disabled
        this.name.Game1 = true; //enabled
        this.name.Game2 = true; //enabled
      }
        
    }
  }
},

https://www.highcharts.com/demo/column-basic

Demo: https://jsfiddle.net/gd3mz8pf/9/

Answer 1

First of all, you can use linkedTo series property to use one legend item for multiple series.

If you want to have separate legend items, you need to trigger the same operations for all of them. For example:

series: {
  events: {
    legendItemClick: function(e) {
      const series = this;
      const chart = series.chart;
      const allSeries = chart.series;
      const hasChangedOpacity = series.hasChangedOpacity;

      const handleItemClick = (s) => {
        s.group.attr({
          opacity: hasChangedOpacity ? 1 : 0.2
        });
        chart.legend.colorizeItem(s, hasChangedOpacity);
        s.hasChangedOpacity = !hasChangedOpacity;
      };

      if ([0, 1].includes(series.index)) {
        handleItemClick(allSeries[0]);
        handleItemClick(allSeries[1]);
      } else {
        handleItemClick(allSeries[2]);
        handleItemClick(allSeries[3]);
      }
      // prevent default behaviour
      return false;
    }
  }
}

---

Live demo: https://jsfiddle.net/BlackLabel/vkt6uf5b/

API Reference: https://api.highcharts.com/highcharts/series.column.linkedTo