create background image for a plot using plotly/dash

Question

I'm trying to create an plot for plotly/dash with a background image. The plot is created, but the background image doesn't. The file and the image are located in the same directory.

Am I missing something?

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

IMAGE_FILENAME1 = 'link.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)

getting the properties of fig:

fig
Figure({
    'data': [{'type': 'bar', 'y': [2, 1, 3]}],
    'layout': {'images': [{'layer': 'below',
                           'source': ('data:image/png;base64,iVBORw0K' ... 'Q7B0QA13afSQHVAAAAAElFTkSuQmCC')}],
               'template': '...',
               'title': {'text': 'Native Plotly rendering in Dash'}}

r-beginners · Accepted Answer · 2020-12-26 08:36:48Z

0

My suggestion may not solve the problem, since it is unclear what kind of graph the image does not show. I have tried to display the image I have with your code. The only code I modified is the following one line.

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

IMAGE_FILENAME1 = './data/plotly_graphing_libraries_1.png'
image1 = base64.b64encode(open(IMAGE_FILENAME1, 'rb').read())

app = JupyterDash(__name__)
# app = dash.Dash(__name__)

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

fig.add_layout_image(dict(source='data:image/png;base64,{}'.format(image1.decode()),
                          xref="x",
                          yref="y",
                          x=0, y=3,
                          sizex=2,
                          sizey=2, 
                          sizing="stretch",
                          opacity=0.5,
                          layer="below"))

fig.update_layout(template="plotly_white")

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

app.run_server(mode='inline')

edited Dec 26, 2020 at 8:36

answered Dec 26, 2020 at 7:46

r-beginners

35.6k3 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1977050 Over a year ago

what about integration with dash?

r-beginners Over a year ago

I checked my environment using Dash on jupyterlab. I have updated the code.

Collectives™ on Stack Overflow

create background image for a plot using plotly/dash

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related