Adding border to window of choropleth figure

📊 Plotly Python
1

Hi I was hoping to get some help with a problem. I’m trying to make a choropleth map of the US with a bounding box around the actual map component. This seems to be done automatically when the scope is set to world as shown below.

import plotly.express as px

df = px.data.election()
fig = px.choropleth(
    df,
    scope="world",
    locations="district",
    color="Bergeron")
fig.show()

map1
map12206×1228 194 KB

The black border around just the map portion of the figure is what I’d like to recreate when making a plot of the US, but it’s missing by default as shown below.

import plotly.express as px

df = pd.DataFrame({"State": ["NY", "CA", "TX"], "value": [10, 20, 30]})
fig = px.choropleth(
    df,
    locations='State',
    locationmode="USA-states",
    color='value',
    scope="usa",
)
fig.show()

map2
map22504×1340 137 KB

I tried manually creating a rectangle by updating the layout, which I can align properly, but as soon as I resize the window of my web browser the rectangle no longer aligns.

fig.update_layout(
        shapes=[
            dict(
                type='rect',
                xref='paper',
                yref='paper',
                x0=0.0, x1=1.0,
                y0=0, y1=1,
                line={'width': 3}
            )
        ]
)

Any help into how to solve this would be greatly appreciated!

2

So I was able to find a workaround to this, posting here in case this helps anyone else. As mentioned previously I can manually draw a border around my figure, the problem was that the choropleth figure would resize itself if I adjusted the browser window size causing the rectangle to become misaligned. Adding autosize=False and specifying the height and width as necessary seems to have solved the problem for me. It does require some trial and error adjusting the y0, and y1 parameters to get the rectangle lined up the way I want but otherwise I’m happy with the results.

fig.update_layout(
    autosize=False,
    width=750,
    height=450,
    shapes=[
        dict(
            type='rect',
            xref='paper',
            yref='paper',
            x0=0.0, x1=1.0,
            y0=0.0, y1=1.0,
            line={'width': 3}
        )
    ]
)