Plotly - labels to points in different browsers

[Elisa24]

I have the following code that demonstrates using labels to some points:

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

data = {
  "A": [420, 380, 390],
  "B": [50, 40, 45]
}

df = pd.DataFrame(data)
fig = px.scatter(df, x='A', y='B')

important = df[df["A"]<400]

for x,y,counter in zip(important["A"], important["B"], [0, 1]):
    if counter == 0:
        name = r'$\delta \ \mathrm{Hi}

In Firefox, I obtain:
if counter == 1:
name = r’$\sigma \ \mathrm{Hi}

In Firefox, I obtain:


    fig.add_annotation(
        x=x,
        y=y,
#        width=50,
        xref="x",
        yref="y",
        text=name,
        showarrow=True,
        font=dict(
            family="Courier New, monospace",
            size=18,
            color="#ffffff"
            ),
        align="center",
        arrowhead=0,
        arrowsize=1,
        arrowwidth=2,
        arrowcolor="black",
        ax=10,
        ay=-30,
        bordercolor="#c7c7c7",
        borderwidth=2,
        borderpad=4,
        bgcolor="#ff7f0e",
        opacity=0.8
        )

fig.update_layout(showlegend=False)
fig.write_html("Fig.html")
fig.show()

In Firefox, I obtain:

when I set the width, there is not text.

In Chrome, I obtain:

Why, please?

It works for r’\alpha‘, r’string’, but not for r’$\alpha V’, then, there is a shift.