Choropleth map is correct with .show() but is not shown when placed in a dash component

I recently started working with Dash.
When i display a figure with figure.show() it works fine.


The moment I place the figure in a Graph component, it doesn’t show the data anymore, only a plain world map.
Capture2

My code to create the figure:

import matplotlib.pyplot as plt
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Output, Input

fig = px.choropleth(data_frame=df, geojson=data,
                    locations="naam", featureidkey="properties.postcode",
                    projection="mercator"
                    )
fig.update_geos(fitbounds="locations", visible=False)
fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})
display_fig = go.Figure(fig)
# display_fig.show()

My layout:

app.layout = html.Div(children=[
    html.Div([
        dcc.Graph(
            id='districten',
            figure=display_fig
        )
    ])
])

Does anyone know what I am doing wrong?

Hi @yarinowicki welcome to the forum! Nothing looks wrong to me in the code you posted, except that df is not defined (but probably you removed the part where you load df from your disk). If you upload your dataset somewhere and you modify your code to be standalone we can take a look at what’s going wrong. One thing: did you take a look at potential error messages in the browser console?

Hi,

I fixed the problem yesterday, 2 things were changed:

  1. I changed ‘px.choropleth’ to ‘px.choropleth_mapbox’
  2. My geojson was missing an ‘id’, I fixed this by adding one. (This one was probably the problem)

Either way, thanks for your help.

1 Like

have you tried upgrading dash?

Hi, many thanks. I had just recently reinstalled Anaconda but somehow it was still on plotly 1.4.1, I updated and now everything works fine.