✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Remove some space above graph within div

In the screenshot, there is a chrome inspect of a dcc.graph() object that has a bunch of blank space before the graph. When I manually change it in the styles area of the inspect, I can get it to where it needs to be.

How do I add position to the graph() object or the div?

Code:

html.Div([

    html.Div([  # Upper-left div top
        html.H5('Nasdaq and S&P 500 Comparison', style={'color': blue_text}),
        dcc.Markdown('''***'''),
        dcc.Graph(id='nas_sp5',config={'displayModeBar':False})#,'float':'left'})

    ], style={'width': '50%','float':'left',
              'margin_top':'5px',
              #'padding': '0px 0px 0px 0px', 'display': 'block',
              'box-sizing': 'border-box', 'border-width': '1px',
              'paper_bgcolor':'rgba(0,0,0,0)',
              'plot_bgcolor':'rgba(0,0,0,0)'},
    ),


3 Likes

I think it’s changed in the layout of the graph:

dcc.Graph(
   figure={
       'data':data,
       'layout': go.Layout(
           margin={'t': 0},
           ...

the 't' in margin refer to top of the graph. Similarly you can set margin={'l': ?, 'r': ?, 't': ?, 'b': ?}

4 Likes

That worked.

Wow, thanks!