Axis labels are getting duplicated in dom for every resize

[nithin4048-1]

Expected behaviour:
When we resize, axis labels shouldn't be duplicated in dom

Actual behaviour:
Axis labels are getting duplicated in dom for every resize. It is keep growing without any limits.

Product version:
"highcharts-grouped-categories": "^1.3.2"

Live demo with steps to reproduce: -> https://jsfiddle.net/82abwekd/

From the below attached image, you can see test-label axis label has more than one instance in dom.

Here is the behavior after few resize, the labels are getting duplicated and keep goes on.

How we are affected due to this issue:
We have some cases where we need to switch the axis labels between original label and modified label. Here we will show the modified label as axis label and show the original label as tooltip. Due to this multiple duplicated labels, we are unable to show the tooltip when we hover on it as the dom is occupied with the latest duplicated label (not allowing mouseover event).

[nithin4048-1]

Hi @pawelfus @magdalena-gut ,
Do we have any update on this issue ?
Nesting labels affecting the axis labels too.

[pawelfus]

Hi @nithin4048-1

My apologies for the missing response, I did not notice this ticket. It seems the issue was introduced altogether with v8 of Highcharts. v7 works fine: https://jsfiddle.net/BlackLabel/zdxc91vf/

We will debug & fix.

[nithin4048-1]

Thank you so much for the response @pawelfus .

We are currently facing other three critical issues related to the grouped-categories module, which are quite concerning for us:

1. X-axis label positioning – In charts using the grouped-categories module, long axis labels are not retaining their original height and position. I initially raised this as Highcharts issue -> Long axis labels is not retaining its original height (highcharts-grouped-categories) #224, but it was moved here since it pertains specifically to the grouped-categories module.
   Demo -> https://github.com/user-attachments/assets/558ad5f5-dda5-4d9d-a66a-b2f411152379

2. Label truncation and layout – In standard Highcharts behavior, lengthy axis labels are typically allocated about one-third of the chart width, with the remaining two-thirds reserved for the chart itself. However, when using the grouped-categories module, the axis labels consume the entire space, leaving no room for the chart to render. This also seems to interfere with ellipsis truncation in charts that don’t even use grouped categories -> Grouped categories module is affecting the ellipsis truncation of axis labels in charts that do not utilize grouped categories. #228. (raised by my colleague)

3. Highcharts v12 compatibility – We attempted to upgrade to Highcharts v12, but encountered errors. It appears the grouped-categories module needs to be updated to support the latest version -> Highcharts v12 Support #227.

Fixing these three issues would significantly enhance the grouped-categories module, making it a truly robust and reliable package for production use. We believe addressing them will not only improve usability but also ensure better compatibility and visual consistency across Highcharts implementations.

Our company has opted Enterprise edition of Highcharts. First two issues are there in our production while the third is a compatibility concern for staying up to date with Highcharts.

We would appreciate any guidance or updates regarding these issues. Thanks again for your support!

[PaulDalek]

Hi @nithin4048-1

Here is an example with a fix for the label duplication issue: https://jsfiddle.net/Lueazdq6/.

[nithin4048-1]

Hi @PaulDalek ,
Thanks a ton for fixing this. Just tested in the attached fiddle. Works pretty well. I hope it will be merged soon and new version will be published ? or May I know what is the next step to get this fix ?

[PaulDalek]

@nithin4048-1,

This fix should be available soon, as the PR is waiting for review and merge.

[nithin4048-1]

Hi @PaulDalek ,
Any update on this PR review/merge. Our team is still waiting for this fix.