x-Axis labels position bug when useHtml: true with drilldown #8809
Comments
Hi @SaleemDiab, Chrome: 68.0.3440.106 Could you point me out which version of Chrome / OS you have ? Which size of div should I apply ? |
hi @sebastianbochan, you have to drill down and up again |
Chrome Version 68.0.3440.106 Thanks, |
Thanks @SaleemDiab for reporting this bug. Actually, we have two regressions here:
Last working version: v6.0.4: http://jsfiddle.net/BlackLabel/xu2oh1yr/84/ |
any suggested workaround ? |
@SaleemDiab Could you try |
@pawelfus, thank you very much it really solved the issue for me :) |
@pawelfus, sorry to disappoint you again but I found another issue : |
@SaleemDiab I'm sorry to see that :( I don't see any better workaround than disabling |
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/ |
Thanks @TorsteinHonsi for the workaround.
I don't know if it is a good idea what I did, but I'll wait for the fix. {
...
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
}
}
}
} |
… after hover when useHTML was true. Regression since #8809.
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
The text was updated successfully, but these errors were encountered: