How to center a dash graph?

Question

I am trying to center a dash graph. The plot is in a box and even though I changed the height, tried centering the element by using this answer: https://stackoverflow.com/a/1725782 But the graph still shows whitespace like this:

this is the current code that brings this graph I tried increasing the height but it didn't work too.

          html.Div(
                    dcc.Graph(id="backwards", responsive=True),
                    style={
                        "width": "68%",
                        "height": "800px",
                        "display": "inline-block",
                        "border": "3px #5c5c5c solid",
                        "padding-top": "5px",
                        "padding-left": "1px",
                        "overflow": "hidden",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": "-400px"
                    },
                )

plotly layout code

fig.update_layout(
            height=2000,
            width=870,
            hoverlabel={
                "font": {"family": "monospace"},
            },
            template = "plotly_dark",
            font={"family": "monospace", "size": 18},
            
            margin={
                "pad": 0,
                "t": 0,
                "r": 0,
                "l": 0,
                "b": 0,
            },
        )
        fig.update_traces(showlegend=False)

score 1 · Accepted Answer · answered Jan 11 '21 at 07:52

Adding one more div around the div which had the graph in it, did the trick.

html.Div(
                    html.Div(
                        dcc.Graph(
                            id="backwards", 
                            responsive=True,
                            style={
                                "width": "100%",
                                "height": "100%"
                            }
                        ),
                        style={
                            "width": "100%",
                            "height": "100%",
                        },
                    ),
                    style={
                            "width": "68%",
                            "height": "800px",
                            "display": "inline-block",
                            "border": "3px #5c5c5c solid",
                            "padding-top": "5px",
                            "padding-left": "1px",
                            "overflow": "hidden"
                        }
                )

How to center a dash graph?

1 Answers1