Bar chart labels with link to html elements

đź“Š Plotly Python
1

Hello guys, I have some problem to local links in labels,

like:

01
01820Ă—406 2.64 KB

In the chart, the “sheep” label has attribute with href=“#sheep”
and there is another html element with id=“sheep” below the chart

I want to click “sheep” in the chart, and jump to the sheep below, but it’s doesn’t work.

I try to change href=“https://www.google.com” and it worked, but doesn’t work in html elements

Is there any solutions? thanks!

Here is my demo code, it will generate a dummy html.

import plotly.graph_objs as go
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot, plot


x = [192, 168, 56, 132]
y = ['dog', 'cat', 'sheep', 'pig']
y = ['<a href="#{a}">{b}</a>'.format(a=i, b=i) for i in y]
trace = go.Bar(
    x=x,
    y=y,
    orientation='h'
)
layout = go.Layout(
    autosize=False,
    yaxis=go.layout.YAxis(
        automargin=True
    )
)
fig = go.Figure(data=[trace], layout=layout)
chart = plot(fig, output_type='div', include_plotlyjs=False)

with open('demo.html', 'w', encoding='utf-8') as file:
    file.write('<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>')
    file.write(chart)
    for i in range(50):
        file.write('empty<br>')
    file.write('<a id="sheep">Here is the cute sheep</a><br>')
    for i in range(50):
        file.write('empty<br>')
2

Hi @d0486467,

This is probably a limitation of how Plotly.js handles URLs. I’d recommend opening an issue with the plotly.js project at https://github.com/plotly/plotly.js/issues to discuss whether this is a feature request, bug, or something that won’t really be possible for plotly.js to do.

Thanks!
-Jon

3

Hi @jmmease, thanks for your comment, i will check Github and opening an issue later!