Links in plotly x-axis labels not working

[Kkevsterrr]

I'm trying to add links to each of the labels of the x axis of a heatmap. According to the docs html is respected, but the html data is added as 'data-unformatted'. Am I doing something wrong, or is this actually not supported?

<text text-anchor="start" x="0" y="578.4" data-unformatted="<a href=\"MYLINKHERE.html\">axis_label_1</a>" data-math="N" transform="translate(179.72,0) rotate(30,0,572.4)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre; pointer-events: all;">
    <a style="cursor:pointer">axis_label_1</a>
</text>

[jonmmease]

Hi @Kkevsterrr,

I'm able to create an axis label with a link in this example:

import plotly.graph_objs as go
fig = go.FigureWidget(
    data=[go.Heatmap(z=[[1, 20, 30],
                        [20, 1, 60],
                        [30, 60, 1]])])
fig.layout.xaxis.title = 'Click <a href="http://www.google.com">Link</a> Here'
fig

Could you provide a full example of what you're doing to generate the label that doesn't work?
Thanks!

[Kkevsterrr]

I can't post my original script, but I'll drop in some more information and work on building a trimmed down example later today. I'm trying to add links to the x-axis data labels, not the x-axis title (that seems to work fine). Oddly, the links seem to work in some browsers and not others (some builds of Firefox seem OK, whereas it dose not work in Chrome).

x_axis = ["<a href=\"link_to_number_%d">%d</a>" % (num, num) for num in some_other_list]
data = [go.Heatmap(
            z=intensity,
            x=x_axis,
            y=labels,
            colorscale='Viridis'
)]
...

[Kkevsterrr]

Actually digging into this more, I'm not sure if it's a browser thing, it might be a plotly regression - this seems to work with plotly 2.4.1 and not work with plotly 3.1.1.
I got those version numbers with the following:

# python3
>>> import plotly
>>> plotly.__version__
'2.4.1'

[jonmmease]

OK, thanks for the update. Could you please still add a full reproducible example when you have a chance? Thanks!

[jonmmease]

Hi @Kkevsterrr , are you still interested in working through this? If so, could you add a full example? Thanks!

[Kkevsterrr]

Sorry for the delay! Here's the code. I think I figured out the problem - if the links do not have "http://" in front of them, they don't work. Check the following example - on my version, the google link works, but the others do not.

#!/usr/bin/env python3
import plotly.offline as po
import plotly.graph_objs as go

data1 =[[1, 20, 30],
        [20, 1, 60],
        [30, 60, 1]]

x_axis = ["<a href=\"http://google.com\">google.com</a>", "<a href=\"bing.com\">bing.com</a>", "<a href=\"test.com\">test.com</a>"]

builds = ['a', 'b', 'c']

data = [
        go.Heatmap(
            z=data1,
            x=x_axis,
            y=builds,
            colorscale='Viridis',
            )
        ]

fig = go.Figure(data=data)
po.plot(fig, auto_open=True)

[jonmmease]

Thanks for following up @Kkevsterrr , you're diagnosis looks right. And I think it is the expected behavior. Browsers tend to interpret google.com as http://google.com in the URL bar, but when used in a hyperlink, an href without http:// is treated as a relative path.

[Kkevsterrr]

Hmm no I don't think it's the expected behavior - plotly should be able to handle and graph with relative links and still treat it as a link - if you try that poc, a href is never set up for the links to bing and test.com - if I was hosting a heatmap and trying to add links to other sites on that server (which is what I was doing that led to the discovery of the bug), the tag should be preserved (it isn't). Try running the poc and opening up Developer tools on the links - at least on my machine, there are no hrefs for links without "http://".

[jonmmease]

Oh, I guess I'm seeing something different than you are. I tried it in JupyterLab on Chrome and here's what I see.

All three labels are interpreted as links (I can click on each and I navigate to a new page)

• the google.com link navigates to http://google.com, which chrome opens as https://www.google.com/
• the bing.com link navigates to http://localhost:8888/bing.com, which is a 404.
• Likewise for test.com

This is the "expected" behavior that I was referring to.

But, when I save it to a standalone html file, as in your example, the bing.com and test.com links look clickable, but clicking on them does nothing. And here's what I see when I look at the SVG structure
google.com

bing.com

So it looks like the google.com link results in a xlink:href="http://google.com" attribute, but the bing.com link doens't result in a xlink:href="bing.com" attribute. Which I do think it should.

Does this match what you're seeing?

[Kkevsterrr]

Yup - that matches exactly what I'm seeing. Thanks for digging into it further!