XY Chart Tool Tip clipping

Not sure if this classifies as a bug or lack of knowledge on my part.

If the length of the tool tip extends outside of the viewport it is cut off.

Is there a way to make the tool tip wrap when it will not fit inside the viewport?

I can add padding to the XY Chart style and that will make the tool tip show up, however, when on a mobile device the amount of padding takes up a lot of the available real estate.

I can abbreviate the series name, and move the value to the next line, which in my case will make the tool tip readable, however, it doesn’t really solve the issue. I would expect a scroll bar if content was larger than the viewport, not just clipping.


I ran into this issue about a year ago. If memory serves, tech support told me it is a bug but it is fairly low priority. I never found a way around, personally.

You can embed the chart in a tab container and hide the tabs to get it to fit properly. Or at least that worked in versions I have had this problem with.

I just ran into the same issue:

It's cutting off my percentage value :confused:
I am not sure if there's a special way to wrap the text in this setting:

The middle bar is the only one to display the tooltip text without cutting off:

To date I have not found a way to prevent this issue.

Perhaps, @victordcq or @pascal.fragnoud have a CSS trick up their sleeves.

I resorted to an abbreviation which worked for my case, but probably will not in yours.

I don't remember if the tooltips support markdown or not.

@Transistor may have some input there, it's been quite a while since I've messed with this.

1 Like

huh... I don't think you can achieve that purely with css.
Maybe Victor is up to figure this out with js injection, but frankly... I'd just add newlines to the tooltips. It might not completely get rid of the issue, but it should mitigate it a bit:

1 Like

XY Chart tooltip

Version 8.1.22 RC1 handles it like this. On the left side of the chart the tooltip is thrown to the right and on the right side it's thrown to the left. The problem occurs if the tooltip is greater than half the chart width. In this case it will overflow.

It seems that there's a case to make it revert to centre-position when in the centre of the graph.

Yeah, definitely much better, but still some times when it is clipped.

Agreed. Css wont be enough, js inject would be a lot of work. Best is to add a new line