Search code examples
pythonplotly

Plotly layout with background image from local file


I have the same problem as stated in this question: I want my plot to have a background from a local png file.

Using plotly's example, which uses an image from the web, works.

Using a path to my local image, with or without absolute path, does not work.

Encoding as per the answer to this other question does not help.

import base64
import os
#import plotly.plotly as py
import plotly.graph_objs as go
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot

import numpy as np

trace1= go.Scatter(x=[0,0.5,1,2,2.2],y=[1.23,2.5,0.42,3,1])

with open(os.getcwd() + "/resources/office_map.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode()
# Add the prefix that plotly will want when using the string as source
encoded_image = "data:image/png;base64," + encoded_string

layout= go.Layout(
    title='My title',
    images= [dict(
        source= encoded_image,
        xref= "x",
        yref= "y",
        x= 0,
        y= 10,
        sizex= 744,
        sizey= 1052,
        sizing= "stretch",
        opacity= 0.5,
        layer= "below")])

fig=go.Figure(data=[trace1],layout=layout)
plot(fig)

How hard can it be to get a local image as background? How do you do it?


Solution

  • I needed to read about the x and y parameters of the images dictionary. I had changed the y before testing the encoding solution, and the image appeared way outside the plot. How silly. Setting y to 3 instead fixes it.