Reduce space between dcc.Graph and dcc.Slider

Dash Python
1

Hello, I created the following interactive graph in dash

image
image1442×535 18.9 KB

As you see, the Slider is very far away from the graph. How do I shift the slider closer to the graph?
Layout:

html.Div(
    [dcc.Slider(min=0,max=10,step=0.1,value=5,tooltip={"placement": "top", "always_visible": True},id = "importance_slider")],
    style = {'margin-left':55,'margin-right':55}
),
dcc.Graph(id = "time-series-chart",config= {'displaylogo': False}),

and the callback to the dcc.Graph is

    ....
    N = 10
    t = np.linspace(0,10,N)
    y = np.sin(t)

    fig = go.Figure(
            data   = [go.Scatter(x=t,y=y,
                                 #colorscale="Cividis",
                                 marker = {"size": 25, "color": list(range(-3,10)), "cmid": 0},
                                 mode   = "lines",
                                 fill   = 'tozeroy'
                                 )],
            layout =  go.Layout(
                                xaxis_title="Timeline",
                                yaxis_title="Importance",
                                paper_bgcolor='rgba(0,0,0,0)',
                                plot_bgcolor='rgba(0,0,0,0)',
                                # horizontal_spacing = 0.05,
                                # vertical_spacing   = 0.05,
                                #autosize=False,
                                #width  = 1000,
                                height  = 300,                      
                                xaxis =  {                                     
                                    'showgrid': True
                                            },
                                yaxis = {                              
                                    'showgrid': False,
                                    'zeroline': True, # thick line at x=0
                                    'visible': False,  # numbers below
                                        },                                                        
                                )
    )
    fig.add_vline(x = ticker, line_width = 3,  line_color = "red",opacity = 0.6) #line_dash = "dash",
    return fig
2

Hi @ud.schn

You can try changing the top margin of your graph. In your go.Layout function add another parameter margin which accepts a dictionary of margin values for top, bottom, left, right.

So here you can reduce the top margin of the graph by setting margin=dict(t=5)

Refer this for more info on using the margin attribute - Setting Graph Size

1 Like