Data Window to show dynamic data in the corner of the figure

📊 Plotly Python
1

Hi everyone

My hover data are too large. Is there any method that I can show hover data or any other data in a window that is located in some corner of my plot? I mean when the user move the mouse on a scatter, it’s hover info be shown on a window (like legend) on a corner of the figure (for example: top right of the figure?)

Maybe having a dynamic legend be a solution? But can I produce a dynamic legend that any hover data by moving mouse on the scatter be plotted on the legend part? or any other solution?

2

Hey @Bijan,

You can achieve this with Dash. I created a minimal example below.

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import json

fig = go.Figure()

fig.add_trace(go.Scatter(
    name = "my_figure",
    x=[1, 2, 3],
    y=[2, 4, 6],
    text=["A","B","C"],
    hovertemplate='<br>x:%{x}<br>y:%{y}'  # when we hover on the graph
                                          # it will only show (x,y) on the graph
    ))
         
app = dash.Dash(__name__)

app.layout = html.Div([

    html.Div([],id="hover_text"),
    
    html.Div([dcc.Graph(figure=fig,id="my_figure")]),
   
])


@app.callback(

    Output('hover_text', 'children'),
    [Input('my_figure', 'hoverData')]

    )

def hover_text(hoverData):

    return json.dumps(hoverData['points'][0]['text'])   #when we hover on  the graph it will show ['A','B','C']
                                                        # above the graph
        

if __name__ == "__main__":
    app.run_server(debug=True)

hover_b
hover_b1944×494 15.6 KB

Some additional example links below:

1 Like
3

Thanks @akroma

Thanks for your contribution. Let me know can I use Dash for Jupyter notebook? I wrote your code in the below format but it doesn’t work however that would be great if there be any way for plotly.Python. Guide me if it is possible.

import plotly.graph_objects as go
import dash
from dash import dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import json

fig = go.Figure()

fig.add_trace(go.Scatter(
    name = "my_figure",
    x=[1, 2, 3],
    y=[2, 4, 6],
    text=["A","B","C"],
    hovertemplate='<br>x:%{x}<br>y:%{y}'  # when we hover on the graph
                                          # it will only show (x,y) on the graph
    ))
         
app = dash.Dash()

app.layout = html.Div([

    html.Div([],id="hover_text"),
    
    html.Div([dcc.Graph(figure=fig,id="my_figure")]),
   
])


@app.callback(

    Output('hover_text', 'children'),
    [Input('my_figure', 'hoverData')]

    )

def hover_text(hoverData):

    return json.dumps(hoverData['points'][0]['text'])   #when we hover on  the graph it will show ['A','B','C']
                                                        # above the graph
        

fig.show()
4

Hi @Bijan,

I am not familiar with Jupyter notebook but according to this tutorial it is possible.

1 Like