Forcing pointerOrientation "down" on series tooltips

[alexandersokolow]

We have some smaller charts with stacked series tooltips where the series tooltips end up overlapping with the date axis tooltip:

A simple fix would be to force the series tooltips to appear on the top (which they already do for the smaller columns). This should be achievable by setting the pointerOrientation to "down", but unfortunately the property is being ignored in this scenario.

The documentation says:

IMPORTANT: in some situations, like having multiple tooltips stacked for multiple series, the "up" and "down" values might be ignored in order to make tooltip overlap algorithm work.

See: https://www.amcharts.com/docs/v4/reference/tooltip/#pointerOrientation_property

This seems to be the case for our chart. Is there some workaround for that? There isn't really any good reason to not display them at the top in this scenario, since they are overflowing beyond the boundaries of the chart either way.

[martynasma]

It doesn't look like those tooltips would fit up top.

How about you make axis tooltip go under other tooltips indstead?

dateAxis.tooltip.zIndex = -100;

[alexandersokolow]

Thank you for the quick answer.

This is not a screenshot of the full screen, they would definitely fit up top.

Making the axis tooltip go under the other ones is definitely an improvement, but it would be a bit nicer to not have any overlap at all, by putting them on the top. If there is a simple way to do that, please let me know.

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[alexandersokolow]

Sure, here is a codepen with a simplified version of the chart: https://codepen.io/alexandersokolow96/pen/qBzqwZY

[martynasma]

Thanks. Unfortunately, I was not able to find a way to force tooltips to always stack up.

There's this setting series.tooltip.ignoreBounds = true but it kills tooltip overlap check 🙁

I suggest combining data from all series into a single tooltip: https://www.amcharts.com/docs/v4/tutorials/tooltips-with-rich-html-content/

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[alexandersokolow]

Hi, sorry for the delay, this became more complex than expected, so I've done some other more urgent work first.

Combining the tooltips wouldn't really work that well for our use case either, but I've looked through the amcharts4 source code a bit & found a solution, though it involves changes to that source code. You'd only have to add a relatively simple property, so I hope that this is possible, since patching or forking the code for just our codebase would make future updates a nightmare haha. It definitely works, you can check out the codepen mentioned further below.

About the fix: The XYChart.ts file includes this function (line 1378), which seems to be where the algorithm for aligning the tooltips takes place. A bit further below, the function contains this if-condition (line 1481) that would result in the tooltips going from bottom to top and another if-condition (line 1505) that would result in the tooltips going from top to bottom. The first if-condition also has this block (line 1498) that checks for whether we have reached the maximum & prematurely breaks it if it does to run the second instead. To find out whether this is actually the case & whether tweaking that would be enough to fix my issue, I've modified the code to set the first if-condition to true, comment out the block & set the second loop to false. My theory was that this might force the tooltips to appear at the top. I was happy to see that it worked, you can check out the result in this new codepen: https://codepen.io/alexandersokolow96/pen/MWMPWxX The only change to this codepen was swapping out the minified core.js for a version modified by me, with the aforementioned tweaks (trying to rebuild the source code gave me a bunch of errors & I didn't feel like resolving them haha, so I just looked for the respective location in the minified file and modified it there).

Of course, simply setting those conditions to true and false it not suitable for a patch, let alone for an actual change to the amcharts codebase. There are many possibilities for how it could be done & you probably know better than me what kind of solution would fit in well with the other amcharts objects and properties, but a simple approach could be to add something like a forceTooltipPosition to the XYChart, that would take "top" or "bottom". If it was set to "top", it would essentially replicate my changes (i.e., set the first condition to true, ignore the break-block, set the second to false) & if it was set to "bottom", it would do the opposite (i.e., set the first condition to false, the second to true). What do you think, would you consider adding something like this?

About the ignoreBounds property you mentioned (this is not relevant to this issue anymore, but might be of interest to you): Setting ignoreBounds to true sets the boundingRect to undefined in the tooltip drawing function, which stops most of the subsequent bounding checks, as you would expect, see here. The reason for why this breaks the tooltip alignment algorithm is that the way in which this algorithm tweaks the tooltip positions (or at least part of how it does that) is by running the setBounds function on them (see e.g. here), which is supposed to change the boundingRect, but then gets overwritten by the undefined. Fixing and testing this might be too much effort, but I would encourage you to add a note to the documentation of the ignoreBounds property, saying that it will break / turn off the collision detection algorithm (similar to the "IMPORTANT" note on pointerOrientation). It would be useful for devs to know that.