Open a url by clicking a data point in plotly?
If you're using Dash, you can store the url in the customdata
field and retrieve it in a callback that processes clickData
input as follows.
import webbrowser
import dash
from dash.exceptions import PreventUpdate
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
df = pd.DataFrame(
dict(
x=[1, 2],
y=[2, 4],
urls=["https://www.google.com","https://plotly.com/dash/"],
)
)
app.layout = html.Div(
[
dcc.Graph(
id="graph-id",
figure=px.scatter(data_frame=df, x="x", y="y", custom_data=("urls",)),
),
]
)
@app.callback(
Output('graph-id', 'children'),
[Input('graph-id', 'clickData')])
def open_url(clickData):
if clickData != 'null':
url = clickData['points'][0]['customdata'][0]
webbrowser.open_new_tab(url)
else:
raise PreventUpdate
This is a bit of a work around, but it does achieve the desired functionality
You can put some html into annotations. This includes hyper links of the form Text.
If you want to click on a point and not text, you can make an annotation of an empty string Text = " " that lies directly over your data point.
I tend to make my plots using the python API, so the code for the annotation would be of the form:
plotAnnotes = []
plotAnnotes.append(dict(x=xVal[i],
y=yVal[i],
text="""<a href="https://plot.ly/">{}</a>""".format("Text"),
showarrow=False,
xanchor='center',
yanchor='center',
))
and in the layout include annotations=plotAnnotes. The values of xVal[i] and yVal[i] would come from your data.
It's not quite possible yet, but the best option might be to include a link in the text as hover, here is an example: https://plot.ly/~chris/2540 (click the Code tab to see how to replicate the graph)