Bug with dcc.Graph "titleText" config option

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()
    x=[1,2,3], y=[1,2,3], 
    name="<b>result.id</b>: 5408<br><b>result.name</b>: OpticalPower")
    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"),
        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]
        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.


Hi @tcharland13
It looks like we could improve the behavior. Would you be willing to open a new issue with this report?

1 Like