Why is my annotation_text in python plotly.figure_factory getting the wrong coordinates in some cells?

Question

I'm getting some behavior I don't understand.

Code:

import numpy as np
import plotly.figure_factory as ff

z=np.array([[30.0, 15.0, 14.72899729, 7.72994652, 19.61096606, 15.49867374, 19.85271318, 30.0],
         [30.0, 15.0, 22.36842105, 4.80104712, 20.99742268, 21.51211073, 23.5408971, 0.0],
         [30.0, 15.0, 7.5, 0.0, 0.0, 0.0, 10.63095238, 30.0]])
y = ['Ref:14973', 'Ref:17746', 'Ref:21846']
x = ['MN908947.3', '2361', '2371', '2373', '2374', '2375', '2376', 'Warnings']
z_text = np.array([['G','A', 'A', 'N', 'A', 'A', 'A', ','],
                 ['C', 'C', 'T', 'N', 'T', 'T', 'C', ',hp'],
                 ['C', 'N', 'N', 'N', 'N', 'N', 'T', ',']])
fig = ff.create_annotated_heatmap(
    z, x=x,y=y,
    annotation_text=z_text,
    colorscale=px.colors.diverging.RdYlGn,
    font_colors=['black'],
    showscale=True,
    customdata= dft44,
    hovertemplate= "Sample: %{x} <br>Position: %{y} <br>Score: %{z} <br>BAM: %{customdata}")
fig.update_yaxes(
        title_text = "Pos",
        title_standoff = 25)
fig.show()

If you zoom in a lot you see that it is almost working, the text from z_text is in the right spot in the first and the last columns (MN908947.3 and warnings) but not the middle columns (2361 through 2376)

If you reset axis you can see the missing z_text labels bunched in the far right:

I can't for the life of me figure out why.

Any help much appreciated!!

Answer 1

This is definitely a bug with plotly.figure_factory where the chart renderer is probably having some trouble with x = ['MN908947.3', '2361', '2371', '2373', '2374', '2375', '2376', 'Warnings'] because the annotations stop being correctly placed once the x array changes from 'MN908947.3' to '2361' meaning that there is some confusion between strings and numbers.

My original workaround was to place some non-numeric symbol before the numbers, such as an equals sign ('='), so that they are interpreted as strings, but a better workaround is to pass the argument x=[1,2,3,4,5,6,7] to ff.create_annotated_heatmap and then later update the xaxes so that the ticktext at these xticks are the xvalues that you actually want to display.

import numpy as np
import plotly.express as px
import plotly.figure_factory as ff

z=np.array([[30.0, 15.0, 14.72899729, 7.72994652, 19.61096606, 15.49867374, 19.85271318, 30.0],
         [30.0, 15.0, 22.36842105, 4.80104712, 20.99742268, 21.51211073, 23.5408971, 0.0],
         [30.0, 15.0, 7.5, 0.0, 0.0, 0.0, 10.63095238, 30.0]])
y = ['Ref:14973', 'Ref:17746', 'Ref:21846']

x = ['MN908947.3', '2361', '2371', '2373', '2374', '2375', '2376', 'Warnings']
z_text = np.array([['G','A', 'A', 'N', 'A', 'A', 'A', ','],
                 ['C', 'C', 'T', 'N', 'T', 'T', 'C', ',hp'],
                 ['C', 'N', 'N', 'N', 'N', 'N', 'T', ',']])
fig = ff.create_annotated_heatmap(
    z, x=list(range(len(x))),y=y,
    annotation_text=z_text,
    colorscale=px.colors.diverging.RdYlGn,
    font_colors=['black'],
    # showscale=True,
    # customdata= dft44,
    hovertemplate= "Sample: %{x} <br>Position: %{y} <br>Score: %{z} <br>BAM: %{customdata}")
fig.update_yaxes(
    title_text = "Pos",
    title_standoff = 25,
)
fig.update_xaxes(tickvals=list(range(len(x))), ticktext=x)
fig.show()