Hi!
I have encountered this bug multiple times in my app already, and I am yet to find a fix. The bug happens when the "edits":{"titleText:True} config option is set. This allows to modify the legend content, but it also seems to compress the plot, even if the legend does not take more space. I believe it is due to the font size being bigger in editing mode when clicking on a legend entry. Here is an example, where two curves are added to a graph on a button click:
from dash import Dash, html, dcc, Input, Output, State, no_update
import plotly.graph_objects as go
figure = go.Figure()
figure.add_scatter(
x=[1,2,3], y=[1,2,3],
name="<b>result.id</b>: 5408<br><b>result.name</b>: OpticalPower")
figure.add_scatter(
x=[1,2,3], y=[3,2,1],
name="<b>result.id</b>: 5414<br><b>result.name</b>: OpticalPower")
app = Dash(__name__)
app.layout = html.Div([
html.Button("Toggle curves", id="toggle_btn"),
dcc.Graph(
id="graph",
figure=figure,
config={"edits":{"legendText":True}} # Removing this line corrects the bug
)
], style={"width":"50%"})
@app.callback(Output("graph", "figure"),
Input("toggle_btn", "n_clicks"),
State("graph", "figure"))
def toggle_curves(n_clicks, fig):
if not n_clicks:
return no_update
fig = go.Figure(fig)
if n_clicks % 2 == 0:
fig.data = fig.data[:2]
else:
fig.add_scatter(x=[1,2,3], y=[2,2,2], name="Polyfit Deg 5 - Result 5408")
fig.add_scatter(x=[1,2,3], y=[3,3,3], name="Polyfit Deg 5 - Result 5414")
return fig
if __name__ == "__main__":
app.run(port=8054, debug=True)
We can see by toggling the button that the graph compresses like such:
This does not happen when we set "edits":{"titleText:False} in the config options of the graph.
Thanks!