Open a url by clicking a data point in plotly?

Question

I have successfully created plotly graphs from python, and gone as far as creating custom html tooltips for the datapoints. But I haven't succeeded in adding functionality to open a link if someone clicks on a datapoint. What I would like is a separate tab to pop up showing more information linked to that particular data point.

Can anyone think of a way to achieve this with plotly?

Answer 1

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.

Answer 2

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)

Answer 3

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

Answer 4

There is a workaround with FigureWidget here that worked for me.