Skip to content
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
Closed

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

SaleemDiab opened this issue Aug 19, 2018 · 11 comments

Comments

@SaleemDiab
Copy link

@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
Copy link
Contributor

@sebastianbochan 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
Copy link
Author

@SaleemDiab SaleemDiab commented Aug 20, 2018

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

@SaleemDiab
Copy link
Author

@SaleemDiab SaleemDiab commented Aug 20, 2018

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

Thanks,

@pawelfus
Copy link
Contributor

@pawelfus 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
Copy link
Author

@SaleemDiab SaleemDiab commented Aug 20, 2018

any suggested workaround ?

@pawelfus
Copy link
Contributor

@pawelfus 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
Copy link
Author

@SaleemDiab SaleemDiab commented Aug 21, 2018

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

@SaleemDiab
Copy link
Author

@SaleemDiab SaleemDiab commented Aug 21, 2018

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

@pawelfus
Copy link
Contributor

@pawelfus 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
Copy link
Collaborator

@TorsteinHonsi 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
Copy link
Author

@SaleemDiab 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
… 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants