I am trying to plot on Dash and Datapane a simple interactive time series where certain time periods are indicated by the background being a certain color. Here is my MWE:
import plotly.graph_objects as go
import pandas as pd
import numpy as np
t = pd.date_range(start='1/1/2018', periods=5, freq='M')
y = [1,2,3,2,1]
fig5 = go.Figure(data=go.Scatter(x=t, y=y, mode='markers'))
fig5.add_vrect(
x0=np.datetime64(datetime.date(2018,2,1)), x1=np.datetime64(datetime.date(2018,3,1)),
fillcolor="LightSalmon", opacity=0.5,
layer="above", line_width=0,
)
fig5.update_layout(
xaxis=dict(
rangeslider=dict(
visible=True
),
type="date"
)
)
fig5.show()
My Jupyter notebook displays the plot just the way I expected it would:

But when I display it locally on Dash, the background height gets all messed up and it looks like this:
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
html.Div([
dcc.Graph(figure=fig5)]),
html.Div([
html.P('Some Statistic Here:')
])
])
app.run_server(debug=True, use_reloader=False)
When I try it in Datapane, I have the same issue:
import datapane as dp
dp.Report("## This shouldn't take this long",
dp.Plot(fig5, caption="Why is this so hard?")
).save(path='report.html', open=True)
With my actual data, it looks even worse. This is what it looks like in my Jupyter Notebook:
This is what it looks like both in Dash and Datapane. I guess the vertical bars are so short that they can't even be seen in the plot and the slider also doesn't show any datapoints. I have tried layer = above and layer = below but it doesn't make any difference.



