Series with too long names damage both legend and tooltip

[MiroLiska]

Expected behaviour

The series with names longer than the current chart container can display should not cause legend and tooltip damage.

Actual behaviour

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

http://jsfiddle.net/z1tm4u3w/ shows the problem
http://jsfiddle.net/z1tm4u3w/1/ shows the possible solution

Affected browser(s)

All

[KacperMadej]

Hi,

Thank you for reporting about the issue and for providing a possible solution.

[TorsteinHonsi]

The commit above fixes the Legend part of the issue. Now I'll have a look at the tooltip.

[MiroLiska]

Hi

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):

• it does not consider the 'tooltip-outside-box', as presented at http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ - your tooltips can be now somehow only a bit wider than the 'box' is, which is a breaking change for all our tiny charts.
• I do not know how to turn off the text wrapping - we do not want it.

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.

[TorsteinHonsi]

it does not consider the 'tooltip-outside-box',

You can set the width to "auto": http://jsfiddle.net/z1tm4u3w/7/

I do not know how to turn off the text wrapping

You can set textOverflow to "ellipsis": http://jsfiddle.net/z1tm4u3w/6/

[MiroLiska]

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.

[TorsteinHonsi]

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.

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.

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...

[MiroLiska]

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
0

[TorsteinHonsi]

One generic solution I can imagine would be to be able mark which part of the formatted string should be allowed to truncate.

pointFormat: '<span style="color:{point.color}">\u25CF</span> <span class="highcharts-truncatable">{series.name}:</span> <b>{point.y}</b><br/>'

Then the buildText function would pick this up.

[MiroLiska]

OK, why not. Please note that there must be a good logic for deciding how wide can be such a tooltip (not the truncatable span!).
min(window.width, 500) or something like that, in order to support both mobile and desktop screens.

[sgjoy1]

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.
Here's a fiddle detailing the issue.

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.

Here's a fiddle with the fix

[KacperMadej]

@sgjoy1 By default tooltip should fit inside of a chart and overflow is hidden, so tooltip size is based on the chart size. The fix in your second demo seems to be working fine.

[h11a]

Is there still a method of getting the tooltip width to be larger than the chart width? Like the original picture.

[sebastianbochan]

@h11a you can use the tootlip.outside option.

For the general support questions please use email / stackoverflow or forum.

[h11a]

It still wraps the text and sets the width on the svg to the size of the chart

[sebastianbochan]

@h11a share your demo via jsfiddle, please. It will allow me to debug the problem.

[h11a]

https://jsfiddle.net/bjqkwn91/

The width of the div container has been set to 100px and the tool tip has been set to print

aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa

.

The flag you suggested "outside": true still causes the tooltip text to be wrapped.. even allowing it outside of the panel.
You can see below in the image

[sebastianbochan]

Hi @h11a,
Thank you for the feedback. The problem is related with fact that HTML does not break long strings by default. See the demo in native HTML: https://jsfiddle.net/BlackLabel/892xdkny/.

To do that you need to use word-break: break-all; in css.

Demo:

• https://jsfiddle.net/BlackLabel/mfnrys59/

[h11a]

Hi
Thanks for your reply but that is not what I am looking for. I want the strings to be on a long single line that is wider that the width of the chart. The break-all solution still sizes the tooltip box to the size of the width of the heatmap chart.

e.g. Rather than

I am looking to achieve this

[pawelfus]

Check this @h11a : https://api.highcharts.com/highcharts/tooltip.outside

[h11a]

As i said above I've tried outside and it still causes it to be the width of the chart.
https://jsfiddle.net/bjqkwn91/

[pawelfus]

Thanks for the demo! Could you create a new issue with that demo? It seems that useHTML causes the issue, without that option it's fine: https://jsfiddle.net/BlackLabel/uxz65nop/

[h11a]

Ok I have just tried this on my actual code that is using "highcharts": "^8.0.0", and "highcharts-angular": "^2.4.0" and it still doesnt work with useHtML false

[h11a]

Just updated to the version matching the one in that example 8.4.0 and still no luck.

[pawelfus]

Interesting. I'm not sure what causes that, but as I asked above, please create new Bug report (https://github.com/highcharts/highcharts/issues/new/choose). If you could recreate issue for both useHTML=true and useHTML=false that would be great. Thanks!