How to get x and y axis value when we hover the mouse

Dash Python
1

Hi Team,
I have one question regarding spikes. Can we get the values between two grid when ever hover the mouse?.
I want the values of co-ordinate and those values should be reflect in x and y axis not into the canvas is should be in axes only.
If yes, then how.
Here is my screenshot for more clarification.

image
image1513×817 146 KB

2

Hi @rohit, could you refrase your question?

Do you want to see the the values on the axes at the spike lines? We had a similar topic a while ago but I can’t find it right now.

3

Same question here, how can i get the values on axes at the spike lines?

4

HI @yidao I don’t think there is a builtin function for this.

Since this topic is tagged with Dash Python here a possible solution using annotations. You could use clientside callbacks to omit transferring the figure between server and client just because of the annotations. You will have to adjust the position of the annotations depending on your paper size.

import dash
from dash import html, dcc, Input, Output, State
import plotly.graph_objects as go
import numpy as np

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Graph(
            id='graph',
            figure=go.Figure(
                data=go.Scatter(
                    x=np.random.randint(0, 255, 300),
                    y=np.random.randint(0, 255, 300),
                    mode='markers'
                ),
                layout={
                    'xaxis': {'showspikes': True},
                    'yaxis': {'showspikes': True},
                    'width': 700,
                    'height': 500
                }
            ),
            clear_on_unhover=True
        ),
    ]
)


@app.callback(
    Output('graph', 'figure'),
    Input('graph', 'hoverData'),
    State('graph', 'figure'),
    prevent_initial_call=True
)
def update(hover, figure):
    if not hover:
        # delete all annotations
        figure['layout'].update({'annotations': []})
        return figure

    # hoverData is available, extract coordinates
    x = hover.get('points')[0]['x']
    y = hover.get('points')[0]['y']

    # add annotations to figure
    figure['layout'].update(
        {
            'annotations': [
                {
                    'xref': 'x',
                    'yref': 'paper',
                    'showarrow': False,
                    'text': f'x:{x}',
                    'x': x,
                    'y': -0.15,
                },
                {
                    'xref': 'paper',
                    'yref': 'y',
                    'showarrow': False,
                    'text': f'y:{y}',
                    'x': -0.15,
                    'y': y,
                },
            ]
        }
    )
    return figure


if __name__ == '__main__':
    app.run(debug=True)

spikes
mred annotations

5

The ‘Input(‘graph’, ‘hoverData’)’ still only returns the (x, y) of “points on graph” only, but not the axis (x, y) which the spike lines touch on the axis.

I have tried with ‘clear_on_unhover=True’, didn’t work for me.

Is there any way to get axis (x, y) which the spike lines touch on the axis in hoverData callback as input?
or another other properties that has the axis (x, y) which the spike lines touch on?

Thanks

6

Hey @vicho29 welcome to the forums.

I’m not sure I understand you correctly, but you want to show the spike lines all the time, no matter if there’s a scatter marker or not?

Something like this?

7

Thanks for comment. Like in this screen-cap, I have a cross-hair by “cursor” (not data points on the trace/line).

Looking for a solution, where the plot can show the y-value where the cross-hair lines touching the Y-axis (not the Y value of the closest data point to cursor):

cross_hair
cross_hair1223×481 49.9 KB

8

This is not built in ploly unfortunately.

The above posted link could help you achieving what you are after. Basically, below the actual trace you might have, there is a go.Heatmap() trace. Since a hover event is emitted on every pixel, you can trigger the calbback with this.

In the end this is a fiddely workaround, there might be ways to achieve this behavior with JS functions. I guess due to position of the paper and zoom status this won’t be a trivial thing but I’m no JS expert by any means.

9

Is this feature now available in plotly by any chance? Thanks

10

Hey @Shri001, welcome to the forums.

I’m not even sure there is a feature request on github for that. You could open it, if you wanted.

11

Hey Hi,
Thanks, May be I’ll go and check the github once.