xAxis.labels.useHTML locks labels resize when the container is getting wider

[grzesiekgs]

http://jsfiddle.net/ah3pqu7r/

1. Narrow container as much as you can (but avoid rotation of labels)
2. Expand container

After expanding, labels are as narrow as they were before expanding.

I guess that the problem is somewhere deep in renderer but I've got an very ugly workaround.

In Tick.prototype.addLabel :

// first call
if (!defined(label)) {

    tick.label = label =
        defined(str) && labelOptions.enabled ?
            chart.renderer.text(
                    str,
                    0,
                    0,
                    labelOptions.useHTML
                )
                //.attr(attr)
                // without position absolute, IE export sometimes is wrong
                .css(merge(labelOptions.style))
                .add(axis.labelGroup) :
                null;
        tick.labelLength = label && label.getBBox().width; // Un-rotated length
        tick.rotation = 0; // Base value to detect change for new calls to getBBox

    // update
    } else if (label) {
        label.attr({ text: str });
    }

replace with :

if (defined(label)) {
    label.destroy();
}

tick.label = label =
        defined(str) && labelOptions.enabled ?
            chart.renderer.text(
                    str,
                    0,
                    0,
                    labelOptions.useHTML
                )
                //.attr(attr)
                // without position absolute, IE export sometimes is wrong
                .css(merge(labelOptions.style))
                .add(axis.labelGroup) :
                null;
        tick.labelLength = label && label.getBBox().width; // Un-rotated length
        tick.rotation = 0; // Base value to detect change for new calls to getBBox

[TorsteinHonsi]

Thanks @grzesiekgs !

Here's a simplified demo: http://jsfiddle.net/highcharts/ah3pqu7r/1/.

Some general advice on issue demos, that makes it easier and more consistent to work with:

1. In issues that are (remotely) connected to the width of the chart, it should be normalized with fixed widths.
2. Options that don't have to do with the issue should be removed, so we have a demo as clean and relative as possible.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[bezrodnov]

Hi,

I have faced a similar (or even same issue).

I have a usecase where Font Awesome icons are defined for each label in the Y axis. "useHTML" = true is used to make this change using label formatter.
The issue I face is that label positions are not getting updated properly when page size is reduced to some small value and then restored to the initial (high) value.
One more reason to use HTML in this use case was to enable text-overflow ellipsis on labels and thus specify configurable max width for label.

The same does not happen in svg mode (useHTML: false).
But it looks like there's no easy way to add FA icons + enable text overflow in SVG mode.

Is there any workaround?

Please check this simplified demo: http://jsfiddle.net/fpcd7um2/.
It's not exactly the same issue which I face locally - locally labels are are also changing there positions to some weird values (so that icons are not aligned horizontally anymore), while in this demo labels only don't receive back necessary amount of space (which is still an issue).

An option to specify min width for the Y label container would probably solve this issue in above usecase, however I could not find such an option.

[bezrodnov]

Upate:

Found a suggestion to use "chart.marginLeft" to fix Y axis width here: https://stackoverflow.com/questions/15582294/fixed-y-axis-label-width-in-highcharts.
For now using this as a workaround.

[wchmiel]

Updated demo with the issue: https://jsfiddle.net/BlackLabel/utn5hkef/
Workaround: https://jsfiddle.net/BlackLabel/dek2s4gz/

[Gr1mdrag0n]

I just tried the workaround, but I'm not sure it's quite solving the issue I'm having. In the attached images you can see that after going narrow and wide again, the first and second label are wrapping pretty badly.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[pawellysy]

unstale

[cebamps]

I am seeing the same issue. Here is the demo I was going to report: https://jsfiddle.net/bp39ezaf/

In my case, the diagonal labels looks really off after resizing: