Unwanted margins in Dash Choropleth

Hey everyone,

I was planning to develop a Dash application with using a Turkey choropleth map. But there is a margin on both sides of the choropleth. I tried to adjust parameters and some “css hack” but doesn’t work. It will be OK to remove the legend.

My main goal is placing the map in a card. Just like this:

import pandas as pd
import requests
import plotly.express as px

# Read dataset and preprocess
df = pd.read_csv("https://gist.githubusercontent.com/Akaame/e9aaf3b17f54fba72a1a27a2a555fa82/raw/a93a367722671dbae93d7e06c44e975b6a637015/tr.csv")
df = df[['il', 'nufus']]

repo_url = 'https://raw.githubusercontent.com/alpers/Turkey-Maps-GeoJSON/master/tr-cities.json'
turkey_regions_geo = requests.get(repo_url).json()

fig = px.choropleth(data_frame=df, 

fig.update_geos(showcountries=False, showcoastlines=False, showland=False, fitbounds="locations",
               projection_rotation=dict(lon=36, lat=0, roll=0))


You can check this colab notebook: Google Colab


You can plot something similar, but without rounded corners for your card,
updating layout as follows:

a= 50
fig.update_layout(height=800, coloraxis_showscale=False, paper_bgcolor='rgb(240,240, 240)', 
                  margin=dict(t=200, r=a,  l=a))

and updating geos:

fig.update_geos(showcountries=False, showcoastlines=False, showland=False, fitbounds="locations",
               projection_rotation=dict(lon=36, lat=0, roll=0), lataxis_range=[latmin, latmax))

latmin, and latmax are some values for latitude that reduce the upper and lower white region around your colormap.

1 Like

Thank you for answer @empet

This line of code coloraxis_showscale=False made more clear the view. But now, the map stuck in a little rectangle. I’ve updated the Colab notebook, and here is the screenshot:

@cepel In my usual Jupyter Notebook it looked ok.
Change the height by trial and error, until it looks as you want. Eventualy set also the layout width.

1 Like

That worked! Thank you so much @empet

After adding geo={"projection": {"type": "natural earth"}} in layout configuration, the margins disappeared. By the way, it will be better to add “bottom” in margin configuration.