0

Working from slightly modified code found here shown below

from jupyter_dash import JupyterDash
from dash import Dash, dcc, html, Input, Output, no_update
import plotly.express as px

data_x = [1,2,3]
data_y = [1,2,1]

fig = px.line(x=data_x, y=data_y)
fig.update_traces(
    hoverinfo="none",
    hovertemplate=None,
    marker=dict(size=30)
)

app = JupyterDash(__name__)

app.layout = html.Div(
    className="container",
    children=[
        dcc.Graph(
            id="graph-3",
            figure=fig,
            clear_on_unhover=True),
        dcc.Tooltip(
            id="graph-tooltip-3",
            background_color="lightgrey",
            border_color="blue"),
    ],
)

@app.callback(
    Output("graph-tooltip-3", "show"),
    Output("graph-tooltip-3", "bbox"),
    Output("graph-tooltip-3", "children"),
    Input("graph-3", "hoverData"),
)
def update_tooltip_content(hoverData):
    if hoverData is None:
        return no_update

    pt = hoverData["points"][0]
    bbox = pt["bbox"]

    children = [
        html.P(f"x: {pt['x']}, y: {pt['y']}")
    ]
    return True, bbox, children

app.run_server(mode='inline')

enter image description here

I am trying to position a tool tip with code at an x, y coord found in fig.data, rather than through pointing on the graph.

fig.data
(Scatter({
     'hoverinfo': 'none',
     'legendgroup': '',
     'line': {'color': '#636efa', 'dash': 'solid'},
     'marker': {'size': 30, 'symbol': 'circle'},
     'mode': 'lines',
     'name': '',
     'orientation': 'v',
     'showlegend': False,
     'x': array([1, 2, 3], dtype=int64),
     'xaxis': 'x',
     'y': array([1, 2, 1], dtype=int64),
     'yaxis': 'y'
 }),)

I could achieve the desired result with Plotly.Fx.hover as described here, but I would prefer to not use a client side callback and to avoid the undocumented Plotly.Fx.hover function which I read was going to be deprecated.

Ultimately, I want to link a graph with a dash table using callbacks. When I click on a table cell, I want to see the same tooltip as when I hover on the graph. When I hover on the graph, I want to see a row of the table highlighted.

I have also asked this question on the plotly community forum here.

jgm_GIS
  • 201
  • 1
  • 13

0 Answers0