How do I obtain graph width?

Dash Python
1

I have graph with a range slider below it, to control horizontal zoom (see image below). I would like the width of the range slider to match that of the graph, without ticks, labels, legend, etc. How do I obtain that information from the figure layout?

image
image1280×686 25.8 KB

2

Hey @MaartenB, maybe this topic helps you:

3

I think you need to set width in your graph and use it to set width of slider. In this case I used ,style={'width':fig.layout.width - 50, 'padding-left': 70}
Please try to run below code:

import pandas as pd
from dash import Dash, dcc, html, Input, Output, dash_table
import dash_bootstrap_components as dbc
import dash

df = px.data.gapminder().query("continent == 'Europe' and year == 2007 and pop > 2.e6")
fig = px.bar(df, y='pop', x='country', text_auto='.2s',
            title="Default: various text sizes, positions and angles",width=600)
fig.update_layout(plot_bgcolor='red')
    
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dcc.Graph(id='graph',figure=fig,style={'width':600})
        ])
    ]),
    dbc.Row([
        dcc.Slider(id='slider',min=0,max=1,step=0.1, value=0.5)
    ],style={'width':fig.layout.width - 50, 'padding-left': 70}, className='align-items-center'),
])

@app.callback(Output('graph','figure'),
             Input('slider','value'))

def update_graph(slider):
    fig = px.bar(df, y='pop', x='country', text_auto='.2s',
            title="Default: various text sizes, positions and angles")
    fig.update_layout(plot_bgcolor='red',width=600)
    fig.update_traces(width=slider)
    return fig
if __name__ == '__main__':
    app.run_server(debug=False)

You will get this one:

Screenshot 2023-04-11 112739
Screenshot 2023-04-11 112739732×632 20.2 KB

4

Thanks for the suggestion. However, I prefer not to set the width of the graph manually because the margin may change, depending on the data being plotted. Specifically, I have a bar chart with the legend positioned to the right of the graph. Depending on the legend text, the right margin will vary.
I don’t want come up some manual scaling scheme but I rather let plotly to figure out the correct figure size and copy that for the size of the range slider. Is that possible? I tried to obtain that information from the figure layout but I can’t figure it out