I have an issue with the display name alignment on the plots.

[rajasekar-pb]

Expected behaviour

the name should be aligned with the plot.

Actual behaviour

When i collapse the grouping, the name sometimes miss align with the plot.

Live demo with steps to reproduce

Demo Video: https://www.screencast.com/t/bYNmEW619lpm

Product version

highcharts: 9.2.2
highcharts-angular: 2.10.0

Affected browser(s)

Google Chrome
Version 100.0.4896.60 (Official Build) (64-bit)

[pawellysy]

Hi @rajasekar-pb, thanks for creating the issue!
Could you share the chart configuration or dataset you are using?

I wasn't able to reproduce the bug: https://jsfiddle.net/BlackLabel/y1ve3bqd/

[rajasekar-pb]

Hello @pawellysy , thanks for the quick reply...
I have updated the above fiddle ... Also attached a video demo of the issue from the same ....

Updated fiddle: https://jsfiddle.net/RajasekarPB/0kfyxdov/
Issue Demo Video: https://www.screencast.com/t/VbCJmQkVSa

[pawellysy]

Thanks for creating the demo. I managed to reproduce it on my machine, but the problem appears when changing the width of the window, not when toggling the visibility of the items on the tree grid Axis. Nevertheless, it is a bug.

[rajasekar-pb]

Hello @pawellysy any update on this item ...

[pawellysy]

Hello @rajasekar-pb, Sorry, but we didn't prioritize this issue yet. I will add it higher in our development flow.

[rajasekar-pb]

Hello @pawellysy any update on this item ...

its been an year ... hope to get a positive reply asap ...

[karolkolodziej]

We will try to thoroughly investigate it and will let you know what we find out.

[TorsteinHonsi]

Reliable reproduction: https://jsfiddle.net/highcharts/v2c79qsj/

The shortened "Create unit tests" label has bad vertical alignment.

[TorsteinHonsi]

The vertical alignment fails because when the ellipsis logic totally removes the text (because it's too short), the height of the bounding box becomes 10. Which is the top and bottom padding combined. Then when the user script runs .css() directly to adjust the width, the item is not re-aligned. Strictly speaking not a Highcharts bug.

The label re-formatter code is not in our repo, so I don't know where it comes from or who wrote it. But I do think we should offer a native option to limit the label width to the task width.

Workaround

Make sure the text doesn't fully disappear: https://jsfiddle.net/highcharts/v2c79qsj/2/

[TorsteinHonsi]

Workaround 2

Override the xrange to always set data label width: https://jsfiddle.net/highcharts/v2c79qsj/4/

[TorsteinHonsi]

Data label width and the optional ellipsis are now supported natively on the master. See https://jsfiddle.net/highcharts/v2c79qsj/6/

[rajasekar-pb]

hello @TorsteinHonsi,

Thanks for the fix...
May i know which version this fix is included ... also i am using highcharts-angular interface ...
When will it be available for the angular interface ...

[karolkolodziej]

Hi @rajasekar-pb!
The fix hasn't been released yet but will be included in the upcoming release (v11.2.1 or v11.3.0).

The changes here don't affect the highcharts-angular integration and there is no need to update anything.
Just make sure you have the latest highcharts package.