title: Dynamic width of horizontal legend table - Plotly Express
body: <p>Is there a way to fix legend table width with graph width? As soon as I zoom in and zoom out (ctrl+scroll) on html file, the only whing, which is resizing is graph. I want legend table to cover 100% of width page, the same as graph and force legend table to &quot;stretch&quot; together with the graph. The graph is in python.</p>
  <p>The only thing, which I have found is here, but I belive it is not python:</p>
  <pre><code>layout.legend.x = 0 // corresponds to left edge of plot area
  layout.legend.x = 1 // corresponds to right edge of plot area
  </code></pre>
  <p>Minimal reproducible example:</p>
  <pre><code>import plotly.express as px
  
  df = px.data.gapminder().query(&quot;year==2007&quot;)
  fig = px.scatter(df, x=&quot;gdpPercap&quot;, y=&quot;lifeExp&quot;, color=&quot;continent&quot;,
      size=&quot;pop&quot;, size_max=45, log_x=True)
  
  fig.update_layout(legend=dict(
      orientation=&quot;h&quot;,
      yanchor=&quot;bottom&quot;,
      y=1.02,
      xanchor=&quot;right&quot;,
      x=1,
      bgcolor=&quot;LightGray&quot;,
      bordercolor=&quot;Black&quot;,
      borderwidth=1,
      tracegroupgap=50
  ))
  
  filedate = datetime.now().strftime(&quot;%d%m%Y_%H%M&quot;)
  with open(filedate + '_graph.html', 'a') as f:
      f.write(fig.to_html(full_html=False, include_plotlyjs='cdn',config = {'displayModeBar': False}))
  </code></pre>
  <p><a href="https://i.stack.imgur.com/E9cfA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E9cfA.png" alt="enter image description here" /></a></p>