# Mouse position on the layout

**URL:** <https://community.plotly.com/t/mouse-position-on-the-layout/82506>\
**Category:** Dash Python\
**Created:** [February 21, 2024, 6:43pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506 "2024-02-21T18:43:08Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 21, 2024, 6:43pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/1 "2024-02-21T18:43:08Z")

</div>

Hey, all!  
I have a graph with 1 xaxis (timestamp) and 3 yaxis (power DB, Distance, Altitude).  
Distancce and Altitude have one scatter plot each, and power DB has about 100 scatter plots.  
So i cannot use hoverdata because it is messy and provide not usefull information.  
I would like to capture mouse position according to all axis and provide popup with all 4 dimensions coordinates in real time.  
To be more presice: i dont want to get this info from scatter plots points. i just need it according to layou, even if it is empty.

I’ve been trying to search for solution for last 2 days. And cannot find one.  
Seems this should be able through some clientside callback.  
Would appreciate some help!

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [February 22, 2024, 9:45am UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/2 "2024-02-22T09:45:32Z")

</div>

Hey @katafalk2009 welcome to the community.

Could you add some information/code and/or explain your problem differently? I’m having problems to understand the issue.

---

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 22, 2024, 4:01pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/3 "2024-02-22T16:01:06Z")

</div>

Well i cannot share real graphs so i drew one. Hope this helps 🙂  
so i want to have this small popup with all axis info whereever my mouse is.

 ![untitled](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/f/2fc49db8dde0eb4a43a5eaea32e16cab50f901fa.png)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [February 22, 2024, 5:29pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/4 "2024-02-22T17:29:05Z")

</div>

Something like this?

> [@Show coordinates when there are no points](https://community.plotly.com/t/show-coordinates-when-there-are-no-points/77323/2):
>
> Hi @bpolasek, not sure how to do this. The only idea I have is adding a imshow trace with the same dimensions as your range. I’m aware that I’m posting a python example, JS should be similar tough. import plotly.express as px import numpy as np # create image and plotly express object fig = px.imshow( np.zeros(shape=(90, 160, 4)) ) fig.add\_scatter( x=[5, 20, 50], y=[5, 20, 50], mode='markers', marker\_color='white', marker\_size=10 ) # update layout fig.update\_layout( …

---

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 22, 2024, 5:49pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/5 "2024-02-22T17:49:03Z")

</div>

thank you for your reply!  
ive seen that. it works fine on simple example. but for my purpose it seems not to be working well:

should i create 3 invisible scatters fully filled with points for every axis? what about timestamp?  
also consider i have about 100 traces on my graph with many thousands points of real data. and it already is a bit slow.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 22, 2024, 6:02pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/6 "2024-02-22T18:02:44Z")

</div>

Hello @katafalk2009,

Could you please post an example of the chart that you are wanting to know? If might be possible to add an event listener that can give you back the coordinates.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [February 22, 2024, 6:05pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/7 "2024-02-22T18:05:39Z")

</div>

I actually don’t understand, how you want to manage the information shown in the hover. Unfortunately I don’t understand your use case.

---

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 23, 2024, 8:06am UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/8 "2024-02-23T08:06:52Z")

</div>

well, i’ve drawn it on my picture

---

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 23, 2024, 10:40am UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/9 "2024-02-23T10:40:41Z")

</div>

Actually, i may consider as a solution not to track it in real time, but at least create popup on mousewheel click.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 23, 2024, 3:54pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/10 "2024-02-23T15:54:43Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 27, 2024, 10:47am UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/11 "2024-02-27T10:47:42Z")

</div>

holy borsch, thank you a lot! i will adapt it a bit and definitely use.

---

<div class="post-metadata">

**Author:** ![katafalk2009](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@katafalk2009](https://community.plotly.com/u/katafalk2009)\
**Post date:** [February 27, 2024, 1:38pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/12 "2024-02-27T13:38:46Z")

</div>

for anyone who may search this in future, to track mouse movement instead of clicking just change event type

```auto
dragInfo.addEventListener('mousemove', (event) => {

```

and remove this

```auto
if ((event.which == 2 || event.button == 4 )) {

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 27, 2024, 2:04pm UTC](https://community.plotly.com/t/mouse-position-on-the-layout/82506/13 "2024-02-27T14:04:55Z")

</div>

Correct, mousemove was a lot more code executing, and depending upon your use-case, would really bog things down. 🙂