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
Series with too long names damage both legend and tooltip #6659
The series with names longer than the current chart container can display should not cause legend and tooltip damage.
If the chart is made small and there is no space anymore to show the full name of the series, both legend and tooltip will be illegibly cropped,
Live demo with steps to reproduce
added a commit
May 8, 2017
The legend solution seems to be fine, but the tooltips are not satisfying yet. I have two problems with your tooltip solution (referring to release 5.0.12):
Please have a look at desired look and feel at http://jsfiddle.net/z1tm4u3w/4/ (based on 5.0.10 + my solution presented above):
And now your solution from 5.0.12 - the tooltip is too narrow and wrapped - http://jsfiddle.net/z1tm4u3w/5/ :
Please note that the text wrapping is deadly - the wrapped numbers are very misleading.
Your width:auto is internally still using my solution with ellipsis iteration :) . When you use this style on /5/ (no iteration) , and make the text quite longer, you will see that the tooltip width has no limits now, which is probably not what you want. : http://jsfiddle.net/z1tm4u3w/8/show/ . Something like 'max-width' is necessary.
The solution with textOverflow set to ellipsis is not good, because it cuts off the data value, which is the only reason why I want to have the tooltip.
The auto width comes from this line in Tooltip.refresh. So for this to work with the outside-box study we could override the spacingBox similar to what we do wth chartWidth and chartHeight in the plugin.
That's why we went for word wrapping by default. It would be best to ellipsis the series name itself, but then we become dependent on what the tooltip formatters produce...
By using standard format or standard-like formatters, my solution works OK : see e.g. http://jsfiddle.net/z1tm4u3w/9/
For non-standard formatter generating HTML tables or similar we can simply turn it off, but maybe it would work anyway, never tested it.
In my opinion, it does not matter if you wrap or cut the data values. It is confusing. We do not have 2... people in our village, but neither 215
One generic solution I can imagine would be to be able mark which part of the formatted string should be allowed to truncate.
I'm running into a similar issue. I'm trying to build a sparkline style chart, but the width of the chart forces the tooltip to constrict the container size and the text overflows.
The solution would suggested above (adding the style of width: 'auto') does solve the issue, but it seems a little odd that the tooltip's container is sized based off the spacingBox of the chart.