'Plotly-dash (python): plotly-express timeline shows what I want until I embed it in my dashboard
I created an image, using plotly.express. This is the code:
fig = px.timeline(
bounds,
x_start='start_time',
x_end='end_time',
color='trial_id',
y='label',
hover_name='trial_id',
hover_data={
'trial_id': False,
},
labels={'label': ''},
color_discrete_map=color_mapper,
height=150,
width=1200,
)
fig.update_layout(
showlegend=False,
plot_bgcolor='white',
)
fig.update_xaxes(
tickformat='%H:%M:%S'
)
This is what it shows:
I now want to add this as a component to my dash dashboard. As I understood, I could just add this to the layout as a dcc.Graph object. In my complete structure, it's in here (first Graph, trial_fig).
# Right column
html.Div(
id='right-column',
className='nine columns',
children=[
dcc.Graph(id='trial_fig', figure={}, style={'height': 200}),
dcc.Graph(id='time_fig', figure={}),
],
),
The code I use to generate and return the figures is this (fig_time and info are declared somewhere higher in the code, they work):
colors = ['#F7A622', '#21A5DF']
q, r = divmod(len(bounds), len(colors))
color_mapper = dict(zip(bounds.trial_id, q * colors + colors[:r]))
fig_trials = px.timeline(
bounds,
x_start='start_time',
x_end='end_time',
color='trial_id',
y='label',
hover_name='trial_id',
hover_data={
'trial_id': False,
},
labels={
'label': ''},
color_discrete_map=color_mapper,
)
fig_trials.update_layout(
showlegend=False,
plot_bgcolor='white',
)
fig_trials.update_xaxes(
tickformat='%H:%M:%S'
)
return info, fig_trials, fig_time
This shows up like this:
And after double clicking the upper figure, I can see the contents:
Two questions:
Why do I have to double click to see the timeline? It shows up just fine when I use plotly, and the container seems large enough. It can definitely fit after double clicking.
Why is my color mapping suddenly not working, if the code is exactly the same?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|



