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

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 2

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 3

I reckon that your best bet is to embed the chart in a webpage and use the PostMessage API to listen for click events.

Plotly have made a couple of tutorials; there's one for plotly.js, and one for an embedded chart.

Hope these help!