Question on annotation behavior/location

📊 Plotly Python
1

Hello all,

Please excuse any formatting issues as this is my first post. Many thanks to those who may answer and to those who have answered other posts that I have found insightful in learning to use Plotly Dash.

I am using Dash version 2.10.2 and am on MacOS 13.4.1

I am creating a mapping tool where I am using a diverging color scheme with a choropleth_mapbox to map Census API data. I am setting the midpoint to be the overall state percentage for whatever variable is being mapped. This way the geographies that are above the overall state percentage are shaded one color and those below are shaded another.

I am wanting to have three labels on the colorbar, one indicating the midpoint and midpoint percentage of the state. Then I would like two other labels for above and below the overall state percentage. Due to the variability of the data, it seems the best way to do this, so as to not have the labels overlap the midpoint and be appropriately spaced, is to use annotations.

The problem I am running into, is that it seems no combination of settings for the annotation location will keep the annotation appropriately spaced as the screen/window size is shrunk. Here is a screenshot of a large screen and how it would ideally look regardless of screen/window/size:

map annotations xref
map annotations xref1920×854 99.5 KB

Here is how it looks when I shrink the screen, simulating a smaller window or tablet screen:

map annotations xref smaller screen
map annotations xref smaller screen1880×1198 138 KB

Here is my code for adding one of the annotations:

tract_map.add_annotation(
            text=f"Below {self.state} overall percentage",
            align="left",
            showarrow=False,
            font=dict(size=12),
            xref="paper",
            yref="paper",
            x=1.07,
            y=.1,
            xanchor='left',
            yanchor='middle'
        )

It is my understanding that setting the xref to “paper” and the xanchor to “left” that the annotation should be x% from the left edge of the plot and therefore be sort of “locked” into place as the screen/window is adjusted.

My question is, is there a way to get the annotation to behave similar to the label in locking it’s distance from the colorbar/plot as the screen/window size is adjusted? I realize that simply putting in labels is probably the preferred way to do so, but I honestly cannot figure out a way to get them to consistently be placed in a specific spot based on the data and how I want to plot state sub-geographies against the overall state percentage.

Again, thanks for any insights.