Need to have a clear all button in for legend items in Highchart react

Question

I have a packedbubble chart in React and need to have a clear all button that can deselect all the legendItems. So I can have a button beside the description to clear all the selected legend Items and have a blank chart and on click of individual items I could see only those bubbles in the chart.

I have tried making an event in the below code but it doesnt work.

options = {
  overflow: 'allow',
  chart: {
    type: 'packedbubble',
    height: '100%'
  },
  title: {
    text: ''
  },
  subTitle: {
    text: 'Some text'
  },
  tooltip: {
    useHTML: true,
    pointFormat: '</sub>'
  },
  legend: {
    title: {
      text: 'Classification<br/><span style="font-size: 9px; color: #666; font-weight: normal; font-style: italic;">(Click to pop)</span>'
    }
  },
  plotOptions: {
    packedbubble: {
      dataLabels: {
        enabled: true,
        format: '{point.code}',
        style: {
          color: 'black',
          textOutline: 'none',
          fontWeight: 'normal'
        }
      },
      layoutAlgorithm: {
        splitSeries: false,
      },
      minSize: 25,
      maxSize: 200,
    },
    bubble: {
                events: {
                    checkboxClick: function (event) {

                        var text = 'The checkbox is now ' + event.checked;
                        if (!this.chart.lbl) {
                            this.chart.lbl = this.chart.renderer.label(text, 100, 70)
                                .attr({
                                    padding: 10,
                                    r: 5,
                                    fill: Highcharts.getOptions().colors[1],
                                    zIndex: 5
                                })
                                .css({
                                    color: '#FFFFFF'
                                })
                                .add();
                        } else {
                            this.chart.lbl.attr({
                                text: text
                            });
                        }
                    }
                },
                showCheckbox: true}
  },
  series: []
}

class ClassName extends Component {
  componentDidMount(){
    FunctionName(this.props)
  }

  render(){
    const { FieldName: { result }, dataLoading, dataLoaded } = this.props

    if (dataLoading || !dataLoaded) {
      return <FullPageLoadingIcon />
    }

    const dataOptions = options
    dataOptions.series = result

    return (
      <Container>
        <HighchartsReact
          highcharts={Highcharts}
          options={dataOptions}
        />
      </Container>
    )
  }
}

Answer 1

You can add a button element and call hide method for all series on click.

document.getElementById('clearAll').addEventListener('click', function() {
    chart.series.forEach(s => {
        if (s.visible) {
            s.hide();
        }
    });
});

---

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

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