Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Overflow ellipsis not working if height is too high #5339
Long categories names should be truncated with '...' added at the end. This should be done by default since one of the latest version. Trying to reproduce this on a jsfiddle it seems that the bug occurs when the chart height is too high. On this particular example at least, the bug occurs when the height is over 641.
No ellipsis is appended and the full text is displayed, pushing the chart outside the valid width and therefore not displaying it.
Live demo with steps to reproduce
Firefox, I did not try on others
Indeed I tried with different fixed width and here are the working width/height combinations:
I tried on different screen resolutions, and nothing changes. I also tried to resize the part where the chart is drawn in JSFiddle but again, nothing changes.
It seems that is also depends on the number of elements in the series data: removing the 10 extra items (25 categories, previously 35 items), now I have these working combinations:
It really gets confusing hahaha
I just tried on Google Chrome and I can reproduce the bug but with slightly different values:
Resizing the window can make the chart appear, but hitting again the "Run" button in JSFiddle will the bug to occur again.
I fixed this for your case, but the issue may be deeper. It seems to be a general problem that ellipsis is not applied if the categories are high enough to allow two or more lines of text. In this case, when the text consists of one large word, we will neither get ellipsis or word wrap.
Oh yes it reminds me of an issue I was having with large words, and actually I never solved it: in a HTML div, when text is too long, we can use CSS word-wrap, but then if the text is one large word, it doesn't work, so you have to use word-break, but then, normal text isn't wrapped anymore but broken, cutting words in the middle!! So you have to wrap/cut your text from the backend, but how do you know the width of the div in advance...
Anyway, thank you for your time and for solving this