Not able to add images as an item on legend

Hello,

I am in the process of creating a large data overlay program that brings in various trace types (scatter, heatmap, images) and I’d like to be able to toggle each one on and off. I am well versed in legend groups and all of that but the wall I have run into is this:

it appears there is no “showlegend” or “legendgroup” functionality for data type = image?

“legendgrouptitle” is in the documentation but nothing else pertaining to the legend. Is it possible, with a workaround perhaps, to add an image to the legend?

Thanks!

1 Like

I came up with a workable solution. For this particular dataset, I have a very large image that I want to display. It’s too large to create a smooth-running heatmap, so, I wanted to keep it as an image, and better yet, keep it as a base64 encoded jpeg string so that everything would run and transfer as fast as possible.

I first tried doing this as a regular Image type under data/traces, but, that always seems to lock the axis to be equivalent and you can not zoom on a part of an image without maintaining the same aspect ratio (very frustrating and I could not figure out how to turn this off. All of the examples are this way too). So I went with a static image instead which is appended to the layout. You can still send a base64 string as the source for a static image (the documentation does not state this but the python internal documentation does).

With that, I created a button that toggles the ‘visible’ parameter of the image so I can turn it on and off. Here is just a snippet of code showing the high level of what I am doing:

fig = go.Figure()

#add slab image as static image in layout
fig.update_layout(
images=[go.layout.Image(
x=slabImageData[‘x0’],
sizex=slabImageData[‘sizex’],
y=slabImageData[‘y0’],
sizey=slabImageData[‘sizey’],
xref=“x”,
yref=“y”,
opacity=1.0,
layer=“below”,
sizing=“stretch”,
source=slabImageData[‘byteArr’],
visible=False
)]
)

slabImgButton = dict(method=‘relayout’,
label=‘Slab Image’,
visible=True,
args=[{‘images[0].visible’:True}],
args2 = [{‘images[0].visible’: False}],
)

fig.update_layout(
xaxis=dict(showgrid=False, zeroline=False, range=[-80,80]),
yaxis=dict(showgrid=False, zeroline=False, range=[400,0]), #this will flip the y axis
updatemenus=[
dict(
type=“buttons”,
buttons=[slabImgButton]
)
])

1 Like