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

1 Like
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