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

Dash Python
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