Choropleth background color

Hello,

I have searched around the internet for a few hours now and can’t find the answer to this.

So I have this graph here:

You can see that there is a white square background even though I have set

        plot_bgcolor="#323130",
        paper_bgcolor="#323130",

in the layout.

Here is the full code

    fig = go.Figure(data=go.Choropleth(
        locations=df['state'],
        z = df['happiness'], 
        locationmode = 'USA-states',
        colorscale = colorscale,
        colorbar_title = "Sentiment",
        text = df['text'],
        hoverinfosrc='skip'

                        )
    )

    fig.update_layout(
        geo_scope='usa',
        plot_bgcolor="#323130",
        paper_bgcolor="#323130",
        margin=go.layout.Margin(l=0, r=35, t=0, b=0),
        font=dict(color="white"),
    )

Also as a side question, is there an option I can use to tweak the border color between states? it’s currently dark gray but I would prefer transparent lines.

Thank you!

hi @opophehu,
not sure about your first question, but for the side question, maybe you can create a list of transparent colors using hex code and do:

borders=[hexcode for x in range(len(df))]
fig.update_traces(marker_line_width=borders)

Adam

1 Like

Thanks for the prompt reply Adam.

maybe I was misunderstanding something here, but I tried your suggestion like this:

hexcode = '#00FFFFFF'
borders=[hexcode for x in range(len(df))]
fig.update_traces(marker_line_width=borders)

But it wouldn’t work because I’m feeding a color hex to ‘line width’.

But then I tried:

hexcode = 0
borders=[hexcode for x in range(len(df))]
fig.update_traces(marker_line_width=borders)

And it looks close to what I want now:
image

Thanks a lot for pointing me to the right direction for the line tweaking!

2 Likes

Quick answer to the first question on background: set geo_bgcolor in the choropleth trace, which looks like it controls the background color for maps.

e.g. something like fig.update_traces(geo_bgcolor="#323130")

I ran into this recently, and started at the following docs to get on the right track:

Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.

To get a fully transparent color code set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF (“transparent White”) is the same color as #00F0F8FF (“transparent AliceBlue”). To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.

I fix this issue by using fig.update_layout(geo_bgcolor=PAPER_BGCOLOR).

1 Like