Insert figure on top of an image

Hi, everybody,
I’m trying to do graphics in Dash and I’ve run into a problem. The thing is that I would like to insert an image in which I can zoom, move in it etc (just like in a graphic) and also add some rectangles on top of it. I managed to insert the background image but I don’t know how to add more elements on top of it. The idea is to do something like what I show you in the image below.

I hope you can help me, thank you very much to everyone!

Hi @josemanuu welcome to the forum! You can add the image either as a layout image ( or as an image trace ( if you would like to interact more with the image (hover, selection, etc.). As for adding rectangles, you can add shapes to the figure, see Or do you want to add the shapes by drawing (click and drag) on the image? The latter feature is not available yet with plotly/dash but we’re experimenting with it.


I am having the similar issue and wondering if somebody can help me. I have an image in a .png file. I will need display this image as a background image. Additional I have some image data(in RGB format) stored in a database and I will be able to convert it to a numpy.ndarray. I would like to display the image data as a data_trace on top of the background image. I also would like to make the new image trace to be disappear/appear when I check/uncheck a checkbox. let us say I have an image file called background.png and new data in numpy.ndarray in data variable. I tried following:
backgroundimage = skio.imread(“background.png”)
figure = px.imshow(backgroundimage)

at this point I am getting the following error:

Invalid element(s) received for the ‘data’ property of
Invalid elements include: [Figure({
‘data’: [{‘hovertemplate’: ‘x: %{x}
y: %{y}
color: %{z}’,
‘name’: ‘0’,
‘source’: (‘data:image/png;base64,iVBORw0K’ … ‘OLJguNb4bxpgAAAABJRU5ErkJggg==’),
‘type’: ‘image’,
‘xaxis’: ‘x’,
‘yaxis’: ‘y’}],
‘layout’: {‘margin’: {‘t’: 60},
‘template’: ‘…’,
‘xaxis’: {‘anchor’: ‘y’, ‘domain’: [0.0, 1.0]},
‘yaxis’: {‘anchor’: ‘x’, ‘domain’: [0.0, 1.0]}}

The 'data' property is a tuple of trace instances
that may be specified as:
  - A list or tuple of trace instances
    (e.g. [Scatter(...), Bar(...)])
  - A single trace instance
    (e.g. Scatter(...), Bar(...), etc.)
  - A list or tuple of dicts of string/value properties where:
    - The 'type' property specifies the trace type
        One of: ['bar', 'barpolar', 'box', 'candlestick',
                 'carpet', 'choropleth', 'choroplethmapbox',
                 'cone', 'contour', 'contourcarpet',
                 'densitymapbox', 'funnel', 'funnelarea',
                 'heatmap', 'heatmapgl', 'histogram',
                 'histogram2d', 'histogram2dcontour', 'icicle',
                 'image', 'indicator', 'isosurface', 'mesh3d',
                 'ohlc', 'parcats', 'parcoords', 'pie',
                 'pointcloud', 'sankey', 'scatter',
                 'scatter3d', 'scattercarpet', 'scattergeo',
                 'scattergl', 'scattermapbox', 'scatterpolar',
                 'scatterpolargl', 'scattersmith',
                 'scatterternary', 'splom', 'streamtube',
                 'sunburst', 'surface', 'table', 'treemap',
                 'violin', 'volume', 'waterfall']

    - All remaining properties are passed to the constructor of
      the specified trace type

    (e.g. [{'type': 'scatter', ...}, {'type': 'bar, ...}])

Looks like I can’t use px.imshow() to create a trace to be used in add_trace. Can somebody please help me?

I have figured it out. Instead of using:
figure.add_trace(px.imshow(data)) as I showed above I used following:

figure.add_trace(go.Image(z=data, colormodel=‘rgba256’)) assuming data is a two dimensional numpy.ndarry and each pixel is a 4 digits array with last digit representing transparency.