Unable to make a Background Image appear on Dash plot

Dash Python
1

Having issues getting a background image to appear in my dash plots. I’ve attached a working example that tried to insert the same image (python logo) as in this example, which works: https://plot.ly/python/images/

I’ve tried to make this work multiple ways, but have been unable to make an image appear as soon as I get into Dash.

The only solution I’ve found so far in my search seems to be encoding the image via base64 https://stackoverflow.com/a/50588855 - is this really the only option? I tried a naiive implementation of this stack overflow example and it still didn’t work. A number of other users seem to be having the same issue.

Would really appreciate an assist here! Thank you for reading

import dash_core_components as dcc
import plotly.graph_objs as go
import dash_html_components as html
import dash

app = dash.Dash()

app.layout = html.Div(children = [dcc.Graph(
    figure=go.Figure(
        data=[
            go.Bar(
                x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                   2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
                   350, 430, 474, 526, 488, 537, 500, 439],
                name='Rest of world',
                marker = dict(
                    color='rgb(55, 83, 109)'
                )
            ),
            go.Bar(
                x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                   2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                   299, 340, 403, 549, 499],
                name='China',
                marker = dict(
                    color='rgb(26, 118, 255)'
                )
            )
        ],
        layout=go.Layout(
            title='US Export of Plastic Scrap',
            margin = dict(l=40, r=0, t=40, b=30),
            images = [
                  dict(
                  source= "https://images.plot.ly/language-icons/api-home/python-logo.png", 
                  xref= "x",
                  yref= "y", 
                  x= 0,
                  y= 500,
                  sizex= 2000,
                  sizey= 500,
                  sizing= "fill",
                  opacity= 0.7,
                  visible = True,
                  layer= "below")]
        )
    ),
    style={'height': 600},
    id='my-graph'
)])
app.css.append_css({
    'external_url': 'https://codepen.io/illsci/pen/wxZMQm.css'
})

if __name__ == '__main__':
    app.run_server(threaded = True)
2

Hey @illsci-1

Looks like it is there but you have it off-screen. For example, update the images dictionary to:

images = [dict(
   source= "https://images.plot.ly/language-icons/api-home/python-logo.png",
   xref= "x",
   yref= "y",
   x= 2002,
   y= 400,
   sizex= 50,
   sizey= 50,
   sizing= "contain",
   opacity= 0.7,
   visible = True,
   layer= "below")]

Also, for more information regarding adding images to your dash app, see https://dash.plot.ly/external-resources

3

Thank you! This worked. I appreciate the help very much

5

I am having a similar problem. ultimately, I want a scatter plot shown on the left and an image shown on the right. When the mouse is hovered over a data point in the scatter plot, I want an updated image shown on the right. There are probably a few ways to go about doing this. My approach, which is probably not the best way, is to show the image as a background image in a “figure” and hide the axis lines, grid, and tick marks (which I have not implemented in my code just yet). The scatter plot on the left is fine, however, the background image is not seen. The issue (as best I can tell) is not related to the image being off-screen. Below is my script. If there is a better way, I would love to hear it.

import dash
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import base64

app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/illsci/pen/wxZMQm.css'})

df = pd.read_csv(r'test.csv')

y_data = 'ER'
x_data = 'channels'
app.layout = html.Div(className="row", children=[
    html.Div([
        dcc.Graph(
            id='scatter',
            figure={
                'data': [{
                    'x': df[x_data],
                    'y': df[y_data],
                    'customdata': df['filename'],
                    'mode': 'markers',
                    'marker': {
                        'size': 12,
                        'color': 'rgba(0, 116, 217, 0.5)',
                        'line': {
                            'color': 'rgb(0, 116, 217)',
                            'width': 0.5
                        }
                    }
                }],
                'layout': {
                    'xaxis': {
                        'title': x_data,
                    },
                    'yaxis': {
                        'title': y_data,
                    },
                    'margin': {
                        'l': 50,
                        'r': 10,
                        't': 80,
                        'b': 50
                    },
		'title':"Peak Position vs. ER",
		'hovermode': 'closest'
                }
            },
            hoverData={'points': [{'customdata': 'test.mca'}]}
        )
    ], className="six columns"),

    html.Div([
	dcc.Graph(id='image', 
		)
	], className="six columns")
])

image_route = 'C:/users/test/'

def get_image (encoded_image):
	return{
		'data': [go.Scatter(
			x=[0,1000],
			y=[0,1000],
		)],
		'layout':{
			'height': 0,
			'margin': {'l': 50, 'b': 30, 'r': 10, 't': 10},
			'images': {
				'source': encoded_image,
				'xref': 'x',
				'yref': 'y',
				'x':0,
				'y':500,
				'sizex':200,
				'sizey':200,
				'sizing': 'contain',
				'visible': True,
				'layer': 'above'
				}
			}}
			
@app.callback(
    dash.dependencies.Output('image', 'figure'),
    [dash.dependencies.Input('scatter', 'hoverData')])
def update_plot(hoverData):
	filename = hoverData['points'][0]['customdata']
	image_name=filename+".png"
	location = image_route + image_name
	with open('%s' %location, "rb") as image_file:
			encoded_string = base64.b64encode(image_file.read()).decode()
	encoded_image = "data:image/png;base64," + encoded_string
	
	return get_image (encoded_image)

if __name__ == '__main__':
	app.run_server(debug=False, port=8090)
6

I tried that code, but it didn’t work with other images, for example, this one:

c-core_logo.png907×207 24.7 KB

am I missing something?

7

I downloaded the images, then uploaded them to imgur and that solved the problem.