plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.

Home Page:https://plotly.com/dash

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[BUG] Editable legend in dcc.Graph compresses the plot

thcha67 opened this issue · comments

The bug happens in Dash using the config options of the dcc.Graph component to make the legend content editable.

pip list:

dash==2.11.1
dash_bootstrap_components==1.4.1
plotly==5.14.1

More exactly, it 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)

Here is what happens when we click on the button to add the two extra curves:
plotlybug

This does not happen when we set "edits":{"titleText:False} in the config options of the graph.