Issue with creating background for graph

Dash Python
1

Hi,

I’m trying to create a background image (test.png) for a graph but it never shows up.
Would be glad a suggestion what is the issue.

import base64
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

IMAGE_FILENAME1 = 'test.png'
image1 = base64.b64encode(open(IMAGE_FILENAME1, 'rb').read())


fig = go.Figure(
    data=[go.Bar(y=[2, 1, 3])],
    layout_title_text="Native Plotly rendering in Dash"
)

fig.update_layout( images= [dict(
                    #source="KU.png",                    
                    source='data:image/png;base64,{}'.format(image1.decode()),
                    #xref="container",
                    #yref="container",
                    layer="below")])


app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id="graph", figure=fig),
])

app.run_server(debug=True)
2

Hi @BMWE welcome to the forum! You need to pass a couple of other parameters for the image to be visible as a background image. For example

fig.update_layout( images= [dict(
                    source='data:image/png;base64,{}'.format(image1.decode()),
                    xref="paper",
                    yref="paper",
                    x=0,
                    y=1,
                    sizex=1,
                    sizey=1,
                    sizing="stretch",
                    layer="below")],
                    )

will work. In particular it’s important that the origin of your image (x/y parameters) corresponds to the top-left corner of the graph (so (0, 1) coordinates). Please check the documentation page on layout images for more examples.

3

OK, I have now the background image updated as background.
I’ve replaced the file content (same name), but the background image is not changing. What is going on?