Highcarts: Hide xAxis categorie when serie is not visible

Question

I have stacked column chart where I defined a serie per xAxis categorie. When I click the serie in the legend, the serie becomes hidden, which is what I want. But if the serie is not on the edge of the XAxis, the categorie remains visible. I would like to remove the xAxis label for the series that are not visible without removing them from the legend, so they can reappear when they are clicked again in the legend. Any ideas on how I can accomplish this?

I am using HighchartsReact from 'highcharts-react-official'. The code to set my options is the following:

    const getHighChartsSeries = (columns: string[], tsvdata: tsvdata[]) => {
        const series = [];
        for (let serie in columns) {
            const seriedata: tsvdata = tsvdata.filter((m) => m.sample_id === columns[serie])[0];
            const seriesColors = getSeriesColors(seriedata.data.map((m) => Number(m.seq_freq)));
            const data = seriedata.data.map((sd, index) => {
                return {
                    x: Number(serie),
                    y: Math.round(Number(sd.seq_freq) * 10000) / 100,
                    name: sd.clone_id,
                    color: seriesColors[index],
                };
            });
            const serieEntry: Highcharts.SeriesOptionsType = {
                name: columns[serie],
                type: 'column',
                data: data,
                color: baseColor,
            };
            series.push(serieEntry);
        }
        return series;
    };

    const setHighChartsOptions= (tsvdata: tsvdata[]) => {
        const columns = tsvdata.map((item) => item.sample_id);
        const series = getHighChartsSeries(columns, tsvdata);
        const options: Highcharts.Options = {
            chart: {
                type: 'column',
                zoomType: 'xy',
            },
            title: {
                text: props.title,
            },
            xAxis: {
                showEmpty: false,
                categories: columns,
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Percentage',
                },
            },
            tooltip: {
                headerFormat: '<b>{point.x}:</b><br/>',
                pointFormat: '<b>{point.name}:</b> {point.y} %<br/>',
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                    },
                },
            },
            series: series,
            credits: {
                enabled: false,
            },
        };
        setOptions(options);
    };

Answer 1

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