x-Axis labels position bug when useHtml: true with drilldown

[SaleemDiab]

Expected behaviour

x-Axis label aligned in the correct position under the relevant column after drilldown and drillup

Actual behaviour

x-Axis labels incorrect position when drillup

case:
I found the issue reproduces only when the label is long (few words).
in the live demo please click on the column 'All patches average dE' to drilldown and then make sure that there is enough width to see all the columns in the drilled chart then drill up and you will see that the labels are in incorrect position.

if you drilldown again, few labels will be lost in the drilled chart.

Live demo with steps to reproduce

http://jsfiddle.net/xu2oh1yr/9/

Product version

Highcharts v6.1.1

Affected browser(s)

Chrome only tested

[sebastianbochan]

Hi @SaleemDiab,
Thank you for reporting. When I run your demo, unfortunately I was not able to reproduce the issue.

Chrome: 68.0.3440.106
MacOSX: 10.12.4

Could you point me out which version of Chrome / OS you have ? Which size of div should I apply ?

[sebastianbochan]

Hi @SaleemDiab,
Thank you for reporting. When I run your demo, unfortunately I was not able to reproduce the issue.

Chrome: 68.0.3440.106
MacOSX: 10.12.4

Could you point me out which version of Chrome / OS you have ? Which size of div should I apply ?

[SaleemDiab]

hi @sebastianbochan, you have to drill down and up again

[SaleemDiab]

hi @sebastianbochan, you have to drill down and up again

[SaleemDiab]

Chrome Version 68.0.3440.106
Windows 10
width 960px is enough I think

Thanks,

[SaleemDiab]

Chrome Version 68.0.3440.106
Windows 10
width 960px is enough I think

Thanks,

[pawelfus]

Thanks @SaleemDiab for reporting this bug. Actually, we have two regressions here:

• v6.0.4 -> v6.0.5 -> broken first three labels after drill down (demo: http://jsfiddle.net/BlackLabel/xu2oh1yr/87/). Responsible commit: 6bf7ff5
• v6.0.7 -> v6.1.0 -> broken first three labels after drill up (demo: http://jsfiddle.net/BlackLabel/xu2oh1yr/87/). Responsible commit: cef5aed

Last working version: v6.0.4: http://jsfiddle.net/BlackLabel/xu2oh1yr/84/

[pawelfus]

Thanks @SaleemDiab for reporting this bug. Actually, we have two regressions here:

• v6.0.4 -> v6.0.5 -> broken first three labels after drill down (demo: http://jsfiddle.net/BlackLabel/xu2oh1yr/87/). Responsible commit: 6bf7ff5
• v6.0.7 -> v6.1.0 -> broken first three labels after drill up (demo: http://jsfiddle.net/BlackLabel/xu2oh1yr/87/). Responsible commit: cef5aed

Last working version: v6.0.4: http://jsfiddle.net/BlackLabel/xu2oh1yr/84/

[SaleemDiab]

any suggested workaround ?

[SaleemDiab]

any suggested workaround ?

[pawelfus]

@SaleemDiab Could you try xAxis.labels.rotation = 0 ? This should resolve the issue, please take a look: http://jsfiddle.net/BlackLabel/xu2oh1yr/107/

[pawelfus]

@SaleemDiab Could you try xAxis.labels.rotation = 0 ? This should resolve the issue, please take a look: http://jsfiddle.net/BlackLabel/xu2oh1yr/107/

[SaleemDiab]

@pawelfus, thank you very much it really solved the issue for me :)

[SaleemDiab]

@pawelfus, thank you very much it really solved the issue for me :)

[SaleemDiab]

@pawelfus, sorry to disappoint you again but I found another issue :

[SaleemDiab]

@pawelfus, sorry to disappoint you again but I found another issue :

[pawelfus]

@SaleemDiab I'm sorry to see that :( I don't see any better workaround than disabling useHTML or downgrading to v6.0.4.

[pawelfus]

@SaleemDiab I'm sorry to see that :( I don't see any better workaround than disabling useHTML or downgrading to v6.0.4.

[TorsteinHonsi]

I think I have found the underlying source of the problem, it has to do with internal cache not being cleared after unsetting width by CSS. The fix will be committed in a minute and release with the next maintenance release, targeted next week.

Here's a drop-in workaround you can use in the meantime:

// Drop-in workaround for #8809
Highcharts.SVGElement.prototype.htmlCss = function (styles) {
    var wrapper = this,
        element = wrapper.element,
        textWidth = styles && element.tagName === 'SPAN' && styles.width;

    // When setting or unsetting the width style, we need to update
    // transform (#8809)
    if (textWidth || (wrapper.textWidth && !textWidth)) {
        delete styles.width;
        wrapper.textWidth = textWidth;
        wrapper.htmlUpdateTransform();
    }
    if (styles && styles.textOverflow === 'ellipsis') {
        styles.whiteSpace = 'nowrap';
        styles.overflow = 'hidden';
    }
    wrapper.styles = Highcharts.extend(wrapper.styles, styles);
    Highcharts.css(wrapper.element, styles);

    return wrapper;
};

View it live: http://jsfiddle.net/highcharts/xu2oh1yr/115/

[TorsteinHonsi]

I think I have found the underlying source of the problem, it has to do with internal cache not being cleared after unsetting width by CSS. The fix will be committed in a minute and release with the next maintenance release, targeted next week.

Here's a drop-in workaround you can use in the meantime:

// Drop-in workaround for #8809
Highcharts.SVGElement.prototype.htmlCss = function (styles) {
    var wrapper = this,
        element = wrapper.element,
        textWidth = styles && element.tagName === 'SPAN' && styles.width;

    // When setting or unsetting the width style, we need to update
    // transform (#8809)
    if (textWidth || (wrapper.textWidth && !textWidth)) {
        delete styles.width;
        wrapper.textWidth = textWidth;
        wrapper.htmlUpdateTransform();
    }
    if (styles && styles.textOverflow === 'ellipsis') {
        styles.whiteSpace = 'nowrap';
        styles.overflow = 'hidden';
    }
    wrapper.styles = Highcharts.extend(wrapper.styles, styles);
    Highcharts.css(wrapper.element, styles);

    return wrapper;
};

View it live: http://jsfiddle.net/highcharts/xu2oh1yr/115/

[SaleemDiab]

Thanks @TorsteinHonsi for the workaround.
For the meantime I already did this as a workaround (without touching the Highcharts code) and it worked for me:

• added the drill up event to set the labels width

• added style="width: 100%; text-align: center;" to labels formatter.

I don't know if it is a good idea what I did, but I'll wait for the fix.
http://jsfiddle.net/j9umr0ek/

{
...
charts: {
            ...
            events:{
                 drillup: function(ev){
            	     try {
                        let dataLength = ev.seriesOptions.data.length;
                        let xAxisWidth = this.xAxis[0].width;
                        document
                           .querySelectorAll('div.highcharts-axis-labels.highcharts-xaxis-labels ')[0]
                           .childNodes
                           .forEach(node => node.style.width = xAxisWidth/dataLength+'px')
                      }catch (err){}
                },
            }
            ...
xAxis: {
      ...
      labels: {
        ...
        formatter: function () {
          let value = this.value;
          if(this.chart.series[0].name === 'Cars'){
            return `<div style="width: 100%; text-align: center;"> // <-----  added style attribute 
                            <div style="background: #f86b57;
                                                border: 1px solid #f86b57;
                                                border-radius: 2px;
                                                width: 6px; height: 6px"></div>
                           </div>`;
          }else{
            return `<div style="width: 100%; text-align: center;">${value}</div>`; // <-----  added style attribute 
          }

        }
      }
}

[SaleemDiab]

Thanks @TorsteinHonsi for the workaround.
For the meantime I already did this as a workaround (without touching the Highcharts code) and it worked for me:

• added the drill up event to set the labels width

• added style="width: 100%; text-align: center;" to labels formatter.

I don't know if it is a good idea what I did, but I'll wait for the fix.
http://jsfiddle.net/j9umr0ek/

{
...
charts: {
            ...
            events:{
                 drillup: function(ev){
            	     try {
                        let dataLength = ev.seriesOptions.data.length;
                        let xAxisWidth = this.xAxis[0].width;
                        document
                           .querySelectorAll('div.highcharts-axis-labels.highcharts-xaxis-labels ')[0]
                           .childNodes
                           .forEach(node => node.style.width = xAxisWidth/dataLength+'px')
                      }catch (err){}
                },
            }
            ...
xAxis: {
      ...
      labels: {
        ...
        formatter: function () {
          let value = this.value;
          if(this.chart.series[0].name === 'Cars'){
            return `<div style="width: 100%; text-align: center;"> // <-----  added style attribute 
                            <div style="background: #f86b57;
                                                border: 1px solid #f86b57;
                                                border-radius: 2px;
                                                width: 6px; height: 6px"></div>
                           </div>`;
          }else{
            return `<div style="width: 100%; text-align: center;">${value}</div>`; // <-----  added style attribute 
          }

        }
      }
}