Is it possible to add a hyperlink to data points in a scatter plot

Dash Python
2

Hi @lee, the app below updates the target of a link when hovering on plot data. Another solution would be to update the dcc.Location ie the URL bar of the current tab. I don’t think you can open a new browser tab (see Trigger a click on html.A() from callback) but I might be wrong. Here the trick is to use the customdata argument of plotly traces functions.

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

app = dash.Dash(__name__)

urls = ['https://www.google.com', 'https://dash.plot.ly', 'https://plot.ly']

app.layout = html.Div([
        html.A(children='Please click this link', id='link',
            href='https://dash.plot.ly', target='_blank'),
        dcc.Graph(
            id='figure',
            figure=go.Figure(data=go.Scatter(x=[1, 2, 3],
                                             y=[2, 4, 6],
                                             customdata=urls),
                             layout=go.Layout(clickmode='event+select'))
            ),
        ]
        )


@app.callback(
    Output('link', 'href'),
    [Input('figure', 'hoverData')])
def display_hover_data(hoverData):
    if hoverData:
        target = hoverData['points'][0]['customdata']
        return target
    else:
        raise PreventUpdate


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like