how to hide series data in combination high charts

Question

I am using combine high charts. I need to hide a particular pie chart and column chart data while clicking a particular legend. If i use:

series[i].data[index].remove()

That removes the value but not able to show that value again while clicking the legend.

series[i].data[index].hide()

Refer to this JSFidddle - Example which I tried but I get an error like This is not function. How do I solve this?

Answer 1

You can use hide method on point SVG graphic element:

    events: {
      legendItemClick: function(e) {
        var index = this.index;
        var chart = this.series.chart;
        var series = chart.series;
        var len = series.length - 1;

        if (this.visible) {
          series[0].points[index].graphic.hide();
        } else {
          series[0].points[index].graphic.show();
        }
      }
    }

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

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide