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

📊 Plotly Python
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