Overlaying image on top of a Plotly image using Dash

Dash Python
1

Is there any a way to overlay an image on top of the Plotly graph using Dash?

For instance i want to put a ‘net’ image

image
image1585×493 74.3 KB

on top of the plotly chart:

2
22266×1128 103 KB

to combine a final product like below:

3
32266×1128 90.2 KB

It would be great if i can resize the ‘net’ image.

2

Hi @cpngjames welcome to the forum! You can use a plotly layout image for this (choose layer-'above' if you want the image on top – of course it must have transparency in this case).

3

I have tried to apply plotly layout image as well. But the image does not popup on top of the charts. Is that something to do for the x, y setting missing?

import chart_studio.plotly as py
import plotly.graph_objects as go
import pandas as pd
import numpy as np
from datetime import datetime as dt

import dash
import dash_auth
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly

app = dash.Dash()

app.layout = html.Div([
html.H1(‘Welcome to the app’),
html.H3(‘You are successfully authorized’),
dcc.DatePickerRange(
id=‘date-picker-range’,
start_date_placeholder_text=‘Select a starting date’,
end_date_placeholder_text=‘Select an ending date’,
start_date=‘09/02/2019’,
end_date=‘09/09/2019’
),
dcc.Graph(id=‘my-graph’)
])

@app.callback(Output(‘my-graph’, ‘figure’),
[Input(component_id=‘date-picker-range’, component_property=‘start_date’),
Input(component_id=‘date-picker-range’, component_property=‘end_date’)])

def plotgraph(start_date, end_date):

df = pd.read_csv('HSIU9_20190909.csv')

df['Date'] = pd.to_datetime(df['Date'], format='%Y/%m/%d/%H/%M/%S')
mask=(df['Date'].dt.date >= pd.to_datetime(start_date)) & (df['Date'].dt.date <= pd.to_datetime(end_date))
df=df.loc[mask]

candle=go.Candlestick(x=df['Date'],
                open=df['Open'],
                high=df['High'],
                low=df['Low'],
                close=df['Close'])

vol = go.Bar(x=df['Date'],
             y=df['Volume'], name="Volume", marker_color='#000000', opacity=0.5, yaxis='y2')

layout = go.Layout(autosize=True, title_text='HSI Future at 1-min Interval',title_font_size=30, margin=go.layout.Margin(l=10, r=1, b=10),
                plot_bgcolor='#ffffff',xaxis_rangeslider_visible=False,                    xaxis=dict(title_text="Time", type='category'),
                yaxis=dict(title_text="<b>Index</b>"),
                yaxis2 = dict(title_text="<b>Volume</b>", anchor="x", overlaying="y",side="right"))    

data=[candle, vol]

fig = go.Figure(data=data, layout=layout)
fig.update_layout(xaxis_rangeslider_visible=False)

fig.add_layout_image(
        dict(
            source="C:/Users/01703057/Desktop/template/3.png",
            xref="x",
            yref="y",
            sizing="stretch",
            opacity=0.5,
            layer="above")
)

return fig

if name == ‘main’:
app.run_server(debug=True, use_reloader=False)