score:1

Accepted answer

First of all, you will need to use legendItemClick to set your action.

API Reference: https://api.highcharts.com/highcharts/series.column.events.legendItemClick

If you want to only remove xAxis.labels, just update them by labels.formatter:

plotOptions: {
  column: {
    stacking: "normal",
    events: {
      legendItemClick: function () {
        let name = this.name;
        if (this.visible) {
          this.chart.update({
            xAxis: {
              labels: {
                formatter() {
                  if (this.value === name) {
                    return "";
                  } else {
                    return this.value;
                  }
                }
              }
            }
          });
        } else if (!this.visible) {
          this.chart.update({
            xAxis: {
              labels: {
                formatter() {
                  return this.value;
                }
              }
            }
          });
        }
      }
    }
  }
},

Demo: https://codesandbox.io/s/highcharts-react-demo-forked-gcbz2g

API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter

If you want to remove labels and the space left by a hidden category, you need to use the broken-axis.js module

plotOptions: {
  column: {
    stacking: "normal",
    grouping: false,
    pointPlacement: null,
    events: {
      legendItemClick: function () {
        if (!this.visible) {
          breaks[this.index] = {};
          this.chart.xAxis[0].update({
            breaks: breaks
          });
        } else {
          breaks[this.index] = {
            from: this.xData[0] - 0.5,
            to: this.xData[0] + 0.5,
            breakSize: 0
          };
          this.chart.xAxis[0].update({
            breaks: breaks
          });
        }
      }
    }
  }
},

Demo: https://codesandbox.io/s/highcharts-react-demo-forked-n502os?file=/demo.jsx:678-1453

API Reference: https://api.highcharts.com/highcharts/xAxis.breaks


Related Query