Plotly Go Plot not displaying properly on Dash and on Datapane

369 Views Asked by At

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: enter image description here

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)

enter image description here

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)

enter image description here

With my actual data, it looks even worse. This is what it looks like in my Jupyter Notebook:

enter image description here

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.

enter image description here

0

There are 0 best solutions below