'catch-all' hover/click events

[cpsievert]

It'd be awesome to have dedicated events for obtaining the mouse position (in graph paper/axis coordinates) upon clicking/hovering anywhere on a plot.

This could be useful for many things, including adding annotations on click in a dash/shiny application. In fact, the R community is used to having this capability for any static figure in a shiny application.

PS. this is a feature request related to some existing threads, but was surprised that I couldn't find an existing GH issue

[etpinard]

That's probably an item in #145 about this already. But yeah, this probably deserves an issue of its own.

[jonmmease]

I like this idea.

One subtlety (at least to me!) that came to mind as I was thinking about this is that in order for the axis coordinates to be meaningful, the identity of the associated axes would need to be included somewhere in the event data. For example, the event data might indicate that the coordinates are with respect to xaxis and yaxis2.

[ismirsehregal]

Here is a workaround for R users based on this codepen. However, there is a small horizontal offset I couldn't get rid of so far.

[sleighsoft]

I am currently trying to add this to Plotly.js.

I would like to know if there is a way to transform an event into x/y coordinates within a graph axis? The current click does it by acessing a point underneath a click, which is not possible in the case of a click "anywhere".

I captured this event with the debugger while hovering over a graph.

The event I am talking about is used here:

plotly.js/src/components/fx/click.js

Line 14 in 72c7f31

module.exports = function click(gd, evt, subplot) {

This is an example event

evt
    mousedown
    altKey: false
    bubbles: true
    button: 0
    buttons: 1
    cancelBubble: false
    cancelable: true
    clientX: 881
    clientY: 323
    composed: true
    ctrlKey: false
    currentTarget: null
    defaultPrevented: true
    detail: 1
    eventPhase: 0
    explicitOriginalTarget: <rect class="nsewdrag drag" style="fill: transparent; strok…x; pointer-events: all;" data-subplot="xy" x="80" y="100" width="853" height="270">
    isTrusted: true
    layerX: 881
    layerY: 243
    metaKey: false
    movementX: 0
    movementY: 0
    mozInputSource: 1
    mozPressure: 0
    offsetX: 0
    offsetY: 0
    originalTarget: <rect class="nsewdrag drag" style="fill: transparent; strok…x; pointer-events: all;" data-subplot="xy" x="80" y="100" width="853" height="270">
    pageX: 881
    pageY: 323
    pointerX: 881
    pointerY: 243
    rangeOffset: 0
    rangeParent: null
    region: ""
    relatedTarget: null
    returnValue: false
    screenX: 881
    screenY: 397
    shiftKey: false
    srcElement: <rect class="nsewdrag drag" style="fill: transparent; strok…x; pointer-events: all;" data-subplot="xy" x="80" y="100" width="853" height="270">​
    target: <rect class="nsewdrag drag" style="fill: transparent; strok…x; pointer-events: all;" data-subplot="xy" x="80" y="100" width="853" height="270">
    timeStamp: 4803793
    type: "mousedown"
    view: Window http://localhost:3000/devtools/test_dashboard/index.html#line_style
    which: 1
    x: 881
    y: 323
    <get isTrusted()>: function isTrusted()
    <prototype>: MouseEventPrototype { initMouseEvent: initMouseEvent(), getModifierState: getModifierState(), initNSMouseEvent: initNSMouseEvent(), … }

I want to obtain the coordinates within the axis as is currently done within gd._hoverdata:

gd._hoverdata
    curveNumber: 0
    data: Object { mode: "markers", name: "North America", type: "scatter", … }
    fullData: Object { type: "scatter", uid: "163286", visible: true, … }
    pointIndex: 0
    pointNumber: 0
    text: "United States"
    x: 52698
    xaxis: Object { _attr: "xaxis", _name: "xaxis", _id: "x", … }
    y: 53
    yaxis: Object { _attr: "yaxis", _name: "yaxis", _id: "y", … }
    <prototype>: Object { … }

I used the line_style example when running npm run start:

Besides not knowing how to transform a x/y click coordinates to axis coordinates, I have the following ideas:

• Change gd._hoverdata to contain axis coordinates at any time
• Add a anywhere flag to layout_attributes.js to support click anywhere events.

Let me know what you all think and any help on the above is very welcome.

[hp8wvvvgnj6asjm7]

omg I need this. _

[FabSN]

Is there an update about this issue ?

[amaralc]

I also have been looking for this feature. The onHover option already gives access to the point closest to the mouse position, but I could not do the same for the onClick method. By the way, I'm using plotly with React, in JavaScript.

[TheLogan]

One issue with the example workaround is that it doesn't account for padding/margin in parent objects

I've taken the example and added a parent div that has both padding and margin on the left side, this then skews the value of the x-axis value, and is clearly something that would need to be handled in such a solution as is suggested here.

updated example:
https://codepen.io/tim-logan/pen/yLXgpyp

I found this issue because I was trying to do something similar for a library I'm working on internally for the company I work for, we want a "hoveron='line'" feature for our scatter plots and I figured I could write that, but I've yet to find a way to handle parent padding/margins.