Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Preserving the zoom of choropleth in Dash

Is there a way to preserve zoom state of a choropleth between callbacks?

I am currently updating the choropleth via a callback function that generates a new figure and returning it to gcc.Graph. Replacing a whole figure should be easier than updating individual elements in an existing figure’s data and layout.

I tried to do the following:

  1. Track relayoutData when user zooms using State callback that’s linked to gcc.Graph.
  2. Generate a new choropleth.
  3. Change layout properties of new choropleth according to relayoutData.
  4. Return new choropleth with updated layout to gcc.Graph

I used fig['layout'].update(relayoutData) to change the layout peroperties, but it didn’t work because of error
‘mapbox._derived’ is not a valid property for plotly.graph_objs.Layout

Any thoughts?

I found a solution. Instead of updating all of relayoutData, delete mapbox._derived from relayoutData before updating new choropleth.

Hi @macadish welcome to the forum! You can use the uirevision attribute of plotly figures to keep the UI state, see for example this forum post announcing uirevision.