Mouse position on the layout

Dash Python
10

Here is a version which will print the data to the console on a plotly chart when you mousewheel click:

from dash import *
import plotly.express as px


app = Dash(__name__)
df = px.data.tips()
fig = px.scatter(df, x="total_bill", y="tip", trendline="ols")

app.layout = html.Div([dcc.Graph(figure=fig, id='figure')])

app.clientside_callback("""
        (fig, id) => {
            setTimeout(() => {
                dragInfo = document.querySelector(`#${id} > .js-plotly-plot .nsewdrag`)
                plot = document.querySelector(`#${id} > .js-plotly-plot`)
                dragInfo.addEventListener('click', (event) => {
                    if ((event.which == 2 || event.button == 4 )) {
                        data = {x: event.layerX, y: event.y, height: dragInfo.getBoundingClientRect().height}
                        calcX = ((data.x - dragInfo.x.animVal.value)/dragInfo.attributes.width.value)
                        calcY = (1-((data.y - dragInfo.getBoundingClientRect().y)/data.height))
                        xLoc = (plot.layout.xaxis.range[1] - plot.layout.xaxis.range[0]) * calcX + plot.layout.xaxis.range[0]
                        yLoc = (plot.layout.yaxis.range[1] - plot.layout.yaxis.range[0]) * calcY + plot.layout.yaxis.range[0]
                        console.log(xLoc, yLoc)
                    }
                })
            }, 300)
            return window.dash_clientside.no_update
        }
    """,
    Output('figure', 'id'),
    Input('figure', 'figure'),
    State('figure', 'id'))

app.run(debug=True)

You need to alter your data accordingly, and this I believe will only work on a graph with just one subplot, multiple subplots would be a lot harder.

You can take the data and use it to display some hoverdata at that specific point. Probably be easier to add an element at that point then try to do it through Dash and the plotly chart.

5 Likes