Detecting click only on the point or line possible?

plotly.js
1

My intended scenario was displaying a curve built from several thousand datapoints and allowing the user to mark points of interest on the curve with a mouse click. As it was a bit odd to mark a position on the curve when the cursor was quite afar from it, I changed hoverdistance to 2 (hovermode set to "closest") .

This works as expected except when the plot is zoomed out so that the distance between the points becomes large. Therefore, I would like to be able to detect when the click was not only on the point but also on the line segment drawn between the points (and which point it would translate to).

Simple test code on CodePen

Any hints? Thanks.

2

There’s no easy way to do that at the moment. See https://github.com/plotly/plotly.js/issues/1960 for the most up-to-date development info.

I suggest adding an invisible (i.e. with opacity: 0) mode: 'markers' on top of your mode: 'lines' trace with interpolated points.

3

Thanks for the superquick reply.

I will try implementing your suggestion. If it comes to worst, there’s always the spike lines which can hint the user the actual position of a point…