title: Plotly-dash (python): plotly-express timeline shows what I want until I embed it in my dashboard
body: <p>I created an image, using <code>plotly.express</code>. This is the code:</p>
  <pre><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'
      )
  </code></pre>
  <p>This is what it shows:</p>
  <p><a href="https://i.stack.imgur.com/pmVC9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pmVC9.png" alt="enter image description here" /></a></p>
  <p>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).</p>
  <pre><code># 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={}),
              ],
          ),
  </code></pre>
  <p>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):</p>
  <pre><code>    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
  </code></pre>
  <p>This shows up like this:</p>
  <p><a href="https://i.stack.imgur.com/79vRD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/79vRD.png" alt="enter image description here" /></a></p>
  <p>And after double clicking the upper figure, I can see the contents:</p>
  <p><a href="https://i.stack.imgur.com/O8YYj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O8YYj.png" alt="enter image description here" /></a></p>
  <p>Two questions:</p>
  <ol>
  <li><p>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.</p>
  </li>
  <li><p>Why is my color mapping suddenly not working, if the code is exactly the same?</p>
  </li>
  </ol>