New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
SaleemDiab opened this Issue Aug 19, 2018 · 11 comments

Comments

Projects
None yet
4 participants
@SaleemDiab

SaleemDiab commented Aug 19, 2018

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.

image

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

image

Live demo with steps to reproduce

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

Product version

Highcharts v6.1.1

Affected browser(s)

Chrome only tested

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Aug 20, 2018

Contributor

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

resize

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 ?

Contributor

sebastianbochan commented Aug 20, 2018

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

resize

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

This comment has been minimized.

Show comment
Hide comment
@SaleemDiab

SaleemDiab Aug 20, 2018

hi @sebastianbochan, you have to drill down and up again
awesomescreenshot-2018-08-20t09-06-07-710z

SaleemDiab commented Aug 20, 2018

hi @sebastianbochan, you have to drill down and up again
awesomescreenshot-2018-08-20t09-06-07-710z

@SaleemDiab

This comment has been minimized.

Show comment
Hide comment
@SaleemDiab

SaleemDiab Aug 20, 2018

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

Thanks,

SaleemDiab commented Aug 20, 2018

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

Thanks,

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Aug 20, 2018

Contributor

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

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

Contributor

pawelfus commented Aug 20, 2018

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

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

@SaleemDiab

This comment has been minimized.

Show comment
Hide comment
@SaleemDiab

SaleemDiab Aug 20, 2018

any suggested workaround ?

SaleemDiab commented Aug 20, 2018

any suggested workaround ?

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Aug 21, 2018

Contributor

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

Contributor

pawelfus commented Aug 21, 2018

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

@SaleemDiab

This comment has been minimized.

Show comment
Hide comment
@SaleemDiab

SaleemDiab Aug 21, 2018

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

SaleemDiab commented Aug 21, 2018

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

@SaleemDiab

This comment has been minimized.

Show comment
Hide comment
@SaleemDiab

SaleemDiab Aug 21, 2018

@pawelfus, sorry to disappoint you again but I found another issue :
ezgif com-video-to-gif

SaleemDiab commented Aug 21, 2018

@pawelfus, sorry to disappoint you again but I found another issue :
ezgif com-video-to-gif

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Aug 21, 2018

Contributor

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

Contributor

pawelfus commented Aug 21, 2018

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

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 23, 2018

Collaborator

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/

Collaborator

TorsteinHonsi commented Aug 23, 2018

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

This comment has been minimized.

Show comment
Hide comment
@SaleemDiab

SaleemDiab Aug 23, 2018

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 commented Aug 23, 2018

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 
          }

        }
      }
}

TorsteinHonsi added a commit that referenced this issue Sep 20, 2018

Fixed #8994, a regression causing cropped legend items to become long…
… after hover when useHTML was true. Regression since #8809.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment