highcharts / highcharts

Highcharts JS, the JavaScript charting framework
https://www.highcharts.com
Other
12.08k stars 3.65k forks source link

Which tooltip is triggered by superimposed scatter points does not follow comprehensible logic #22233

Open tnafele opened 1 week ago

tnafele commented 1 week ago

Expected behaviour

If a series has several points at the exact same coordinates, the tooltip triggered at these coordinates should always belong to the last point drawn, i.e. the one visible at the top of the stack.

Which tooltip is triggered should be manipulable or at least predictable.

Actual behaviour

The behavior seems random. Sometimes the triggered tooltip belongs to the top point, sometimes to one below.

Live demo with steps to reproduce

https://jsfiddle.net/5fzrvaq9/

Product version

latest (11.4)

Affected browser(s)

any

bm64 commented 1 week ago

Hello @tnafele and thank you for reaching out.

The findNearestPointBy property lets you decide whether points are selected based on the x pointer position or both xy (default for scatter series). In the provided demo, the point closest to the pointer is selected as expected. Could you clarify what exactly you don't like about this behaviour?

tnafele commented 1 week ago

Hi @bm64

Thank you for your reply.

The issue comes with superimposed scatter points. I.e. they have exactly the same position (x1, y1) === (x2, y2). We are talking about a stack of points.

If two or more points are overlaid like that, which one is selected?

The behavior should be predictable. In an old version (V4) it was always the upmost point, i.e. the one visible. This is how it should be. With later versions this seems random!

Please see the fiddle here.

The points shown in the graph are always superimposing others. A blue one is on top of red one.

Here (x=1, y=1) the upmost point (blue) is selected hence the tooltip shows it's properties (name = "blue"): image This is the expected behavior.

Here (x=1, y=4) the point below (red) is selected hence the tooltip shows it's properties (name = "red"): image This is unexpected.

At x=3, y=2 there are four points at the exact same position. image Here, the third in the stack is selected (green). This is unexpected.

This shows that the behavior is obviously not predictable.

The user should be able to rely on the fact that when arranging the overlapping points in a specific order, the point at the top will always be selected.

bm64 commented 2 days ago

@tnafele, thanks for the detailed explanation!