highcharts 5.0.14 issue with textOverflow

2
votes

After upgrading to Highcharts version 5.0.14, one of my bar chart with very long labels using textOverflow: 'ellipsis' is not working anymore. The whole chart is getting cut off on the right and there is so much white space on the left.

I tried removing following x-axis style config: textOverflow: 'ellipsis', whiteSpace: 'nowrap', and then the chart renders fine. But I really need the ellipsis if the label text becomes too long and don't want it to wrap. So this is not my ideal solution.

See problem in jsfiddle here: https://jsfiddle.net/1so3fezm/2/

I'm partly able to fix the problem by specifying a width for the x-axis labels along with the desired label ellipsis as:

textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 150, but since my chart can be rendered with an option of varying widths, fixing the labels width is also fixing my chart width, which is not what I want. Any help appreciated!

1
javascripthighchartsbar-chartaxis-labelsellipsis
You seem to have xAxis.labels.useHTML: true, but I'm not sure I see you using it? It seems like not setting it (or false) might avoid the problem? - Halvor Holsten Strand
@HalvorHolstenStrand I could never have figured this out! Please add it as an answer so I can accept it. - shweta

1 Answers

1
votes

Your example has activated xAxis.labels.useHTML: true (API). Removing useHTML or setting it to false appears to correct the issue without any further need for action, as you are not actively using the HTML feature.

See this updated JSFiddle of it in use.