Enable Hover and Click Events Anywhere

[alexshoe]

Description:

Added 2 new boolean attributes to the layour object: hoveranywhere and clickanywhere, which respectively allow plotly_hover and plotly_click events to be received anywhere in the plot area and not just over traces.

When hovering/clicking on empty space and with no nearby trace, the events will fire with an empty points array but includes xvals, yvals, xaxes, and yaxes so you still get cursor coordinates in data space. When hovering/clicking over a trace, the event behaves as before with full point data.

Example:

layout: {
  hoveranywhere: true, // enables hover events anywhere, even on empty plotting area
  clickanywhere: true // same for click events
}

See this codepen for an interactive demo of this feature

New API:

hoveranywhere

• Type: boolean
• Default: false
• When true, plotly_hover events fire for any cursor position within the plot area, not just over traces. Events on empty space include an empty points array plus xvals and yvals with cursor coordinates in data space.

clickanywhere

• Type: boolean
• Default: false
• When true, plotly_click events fire for any click position within the plot area, not just over traces. Events on empty space include an empty points array plus xvals and yvals with click coordinates in data space.

[alexcjohnson]

@alexshoe this looks great! Really nice codepen, does a great job showing the feature and how to use it 🎉 But the pseudo-spikeline is a little off. There are actually two ways you might want this to behave, and both have some issues today.

(1) Follow the cursor even if there's a data point to hover on. That's mostly what happens in the codepen as written right now, except that when you DO get a data point, we stop emitting hover events until you get a different data point. This means that the pseudo-spikeline gets stuck at the first mouse position where plotlyjs picked a particular data point, until you get to a position where it picks a different data point. Seems to me when we have hover anywhere - and maybe also when we have spike lines snapping to the cursor? - this means we need to emit a hover event, and update the hoverdata so the click event will get the proper coordinates, on every mouse move even if the hovered data point exists and has not changed.

(2) Stick to the data point when you're hovered on one, or follow the cursor when not near a data point. For this flavor I think we have all the events we need, and if you make the pseudo-spikeline out of a shape, I think we have all the information we need in the event. But if you make the pseudo-spikeline out of a raw DOM element, d.event.offsetY isn't correct when you have a data point, you need the actual pixel position of the data point. Personally I could probably get this using things like fullLayout.yaxis.d2p and fullLayout.yaxis._offset but we probably don't want our users to have to use our internals like this; better would be to publish the mouse location of the actual hover point as part of the event data.