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);
    };