Background appears on px.choropleth plot with custom geojson

Hello

I have began a small project in creating custom geojsons with arbitrary shapes. This seems to be working although I may be mistaken.

However, when I try to plot using plotly express chloropleth only one region is shown, yet they are all there but obscured by the plot background. I have looked at the fig dictionary and cannot see anything obvious.

Minimal example:

import pandas as pd
import plotly.express as px

data = {'type': 'FeatureCollection',
 'features': [{'type': 'Feature',
   'properties': {'city': '1', 'population': 22},
   'geometry': {'type': 'Polygon',
    'coordinates': [[[0.0, 0.0],
      [1.0, 0.0],
      [1.0, 1.0],
      [0.0, 1.0],
      [0.0, 0.0]]]}},
  {'type': 'Feature',
   'properties': {'city': '2', 'population': 23},
   'geometry': {'type': 'Polygon',
    'coordinates': [[[1.0, 1.0],
      [2.0, 1.0],
      [2.0, 2.0],
      [1.0, 2.0],
      [1.0, 1.0]]]}},
  {'type': 'Feature',
   'properties': {'city': '3', 'population': 24},
   'geometry': {'type': 'Polygon',
    'coordinates': [[[2.0, 2.0],
      [3.0, 2.0],
      [3.0, 3.0],
      [2.0, 3.0],
      [2.0, 2.0]]]}},
  {'type': 'Feature',
   'properties': {'city': '4', 'population': 25},
   'geometry': {'type': 'Polygon',
    'coordinates': [[[3.0, 3.0],
      [4.0, 3.0],
      [4.0, 4.0],
      [3.0, 4.0],
      [3.0, 3.0]]]}}]}

area_dict = {}
area_dict["city"] = ["1","2","3","4"]
area_dict["statistic"] = [33,82,74,23]

area_df = pd.DataFrame(area_dict)

fig = px.choropleth(area_df, geojson=data, locations="city", color="statistic", featureidkey="properties.city")
fig.update_geos(fitbounds="locations", visible=False)
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

fig.show()

With output of:

Note that if I hover on the diagonal to the left of the yellow square, the other 3 datapoints are visible.

Thanks
Miles

Edit:

Here is the underlying figure dictionary:

Figure({
    'data': [{'coloraxis': 'coloraxis',
              'featureidkey': 'properties.city',
              'geo': 'geo',
              'geojson': {'features': [{'geometry': {'coordinates': [[[0.0, 0.0],
                                                                     [1.0, 0.0],
                                                                     [1.0, 1.0],
                                                                     [0.0, 1.0],
                                                                     [0.0, 0.0]]],
                                                     'type': 'Polygon'},
                                        'properties': {'city': '1', 'population': 22},
                                        'type': 'Feature'},
                                       {'geometry': {'coordinates': [[[1.0, 1.0],
                                                                     [2.0, 1.0],
                                                                     [2.0, 2.0],
                                                                     [1.0, 2.0],
                                                                     [1.0, 1.0]]],
                                                     'type': 'Polygon'},
                                        'properties': {'city': '2', 'population': 23},
                                        'type': 'Feature'},
                                       {'geometry': {'coordinates': [[[2.0, 2.0],
                                                                     [3.0, 2.0],
                                                                     [3.0, 3.0],
                                                                     [2.0, 3.0],
                                                                     [2.0, 2.0]]],
                                                     'type': 'Polygon'},
                                        'properties': {'city': '3', 'population': 24},
                                        'type': 'Feature'},
                                       {'geometry': {'coordinates': [[[3.0, 3.0],
                                                                     [4.0, 3.0],
                                                                     [4.0, 4.0],
                                                                     [3.0, 4.0],
                                                                     [3.0, 3.0]]],
                                                     'type': 'Polygon'},
                                        'properties': {'city': '4', 'population': 25},
                                        'type': 'Feature'}],
                          'type': 'FeatureCollection'},
              'hovertemplate': 'city=%{location}<br>statistic=%{z}<extra></extra>',
              'locations': array(['1', '2', '3', '4'], dtype=object),
              'name': '',
              'type': 'choropleth',
              'z': array([33, 82, 74, 23])}],
    'layout': {'coloraxis': {'colorbar': {'title': {'text': 'statistic'}},
                             'colorscale': [[0.0, '#0d0887'], [0.1111111111111111,
                                            '#46039f'], [0.2222222222222222,
                                            '#7201a8'], [0.3333333333333333,
                                            '#9c179e'], [0.4444444444444444,
                                            '#bd3786'], [0.5555555555555556,
                                            '#d8576b'], [0.6666666666666666,
                                            '#ed7953'], [0.7777777777777778,
                                            '#fb9f3a'], [0.8888888888888888,
                                            '#fdca26'], [1.0, '#f0f921']]},
               'geo': {'center': {},
                       'domain': {'x': [0.0, 1.0], 'y': [0.0, 1.0]},
                       'fitbounds': 'locations',
                       'visible': False},
               'legend': {'tracegroupgap': 0},
               'margin': {'b': 0, 'l': 0, 'r': 0, 't': 0},
               'template': '...'}
})

Still not sure about how to fix this, would appreciate any help