Plotly: How to plot multiple images on a Plotly figure?

Question

My main objective is to display weather icons on a meteogram, using a Plotly graph from Dash. An example of this requirement is shown below:

Weather Icon Objective

For that, I tried to write the following code:

def graph_pictos(df: pd.DataFrame):
    
    k = 0
    
    fig = go.Figure()

    file_path = 'pictos_png/'
       
    for row in df.itertuples():
        
        picto_number = str(round(row.pictonumber_3h))        
        image_filename = ''.join((file_path, picto_number,'_big.png'))
        picto_image = base64.b64encode(open(image_filename, 'rb').read())
   
        
        fig.add_layout_image(
            go.layout.Image(
                source = 'data:image/png;base64,{}'.format(picto_image.decode()),
                xref = "x",
                yref = "y",
                x = k,
                y = 1,
                sizex = 0.5,
                sizey = 0.5,
                xanchor="center",
                yanchor="middle"
            )
        )
        k+=1
        
   
        
        return fig 

I use a folder of icon images ('pictos_png') where each image name correspond to a weather code. Then, a dataframe df is passed to the function where each row correspond to a weather code for the timestamp considered. However, this function seems to only display one weather icon corresponding to the last icon code in the dataframe df , as it can be seen here:

Icon Image on Plotly

Anyone have any idea why this doesn't work correctly?

Answer 1

The code you've provided isn't easily reproducible. The following setup should be pretty close to what you're looking for though:

Plot

Code

import plotly.graph_objects as go
import plotly.express as px
import pandas as pd

data = {'category': ['A', 'B', 'C', 'D'],
        'x': [4,8,12,16],
        'y':[1,1,1,1],
        'image':["https://images.plot.ly/language-icons/api-home/python-logo.png",
                 "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
                 "https://images.plot.ly/language-icons/api-home/python-logo.png",
                 "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png"],
        'intervals':[[4, 6], [8, 10], [12, 14], [16, 18]]
       }
df = pd.DataFrame(data)

# Create figure
fig = go.Figure()

for i, x in enumerate(df['x']):

    fig.add_layout_image(
            dict(
                source=df['image'].iloc[i],
                xref="x",
                yref="y",
                x=x,
                y=df['y'].iloc[i],
                sizex=2,
                sizey=2,
                sizing="stretch",
                opacity=0.5,
                layer="below")
    )
fig.update_layout(xaxis_range=[0, 20], yaxis_range=[-2,4])

fig.show()