Tengo un gráfico de columnas apiladas donde definí una serie por categoría xAxis. Cuando hago clic en la serie en la leyenda, la serie se oculta, que es lo que quiero. Pero si la serie no está al borde del eje X, la categoría permanece visible. Me gustaría eliminar la etiqueta xAxis para las series que no están visibles sin eliminarlas de la leyenda, para que puedan volver a aparecer cuando se haga clic nuevamente en la leyenda. ¿Alguna idea sobre cómo puedo lograr esto?

Estoy usando HighchartsReact from 'highcharts-react-official' . El código para configurar mis opciones es el siguiente:

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