Dash Plotly Express Choropleth Map internal frame height adjustment?

Dash Python
1

I am very new to Dash, PX, and Python, your help will be very much appreciated.

Currently developing a choropleth map on Dash and managed to get everything working. Then I have the bright idea of putting 2 choropleth map side by side.

I noticed that the inner frame has become much lower/shorter when i have the 2 maps side by side, compared to when I just have 1 map. Screenshots below.

I have tried setting the height inside px.choropleth() and that didn’t work.

I have also tried switching out the dbc and use html.Div with no success.

# Create the choropleth map

fig = px.choropleth(df_choropleth,
                geojson = geojson_file, 

                color = df_choropleth\[df_choropleth_colname\], # region/tla values

                locations = geo_category, # region/tla names

                featureidkey = featureidkey) # matching region/tla names in geojson file
fig.update_geos(fitbounds = "locations", # zoom to locations in geojson file
                visible = False) # hides basemap layer

fig.update_traces(marker_line_color = "white") # white outline on each polygon

fig.update_layout(coloraxis_colorbar_title = None) # remove colour bar



fig = fig2

body = dbc.Row([
dbc.Col(

    dcc.Graph(id = "choropleth", figure = fig, style = {"height": "70vh"})

),

dbc.Col(

    dcc.Graph(id = "choropleth2", figure = fig2, style = {"height": "70vh"})

)
])

The inner frame is much shorter vertically.

image
image1908×682 56.5 KB

Notice the inner frame is tall when its a single plot

image
image1900×676 44.2 KB

2

Welcome to the forum! Since you have fitbounds turned on, you get a fixed aspect ratio due to how the lat/lon ranges are calculated by default in plotly.js. When you put two plots side by side, that width becomes limiting due to the ratio and this results in a shorter height. You can get around this by setting the lat/lon ranges yourself with lonaxis_range and lataxis_range. Those can be tweaked to show a greater height when the plots are side by side. Alternatively, you could use px.choropleth_map which uses a tile map (via MapLibre) and doesn’t have the same behavior.