Trying to get a plotly graph object including both scatter and image to change xtick labels

Question

I am creating a plotly figure, overlapping rectangles on an image and I want to change the xticks.

Example Code:

a = 255*np.random.random((28,28))
pil_img = Image.fromarray(a).convert('RGB')
fig2 = go.Figure(data = [go.Scatter(x=[0,10,10,0], y=[0,0,10,10], fill="toself"),go.Image(z=pil_img)])
fig2.show()

Instead of the ticks being the number of pixels (0-28) I want them to be let's say from 0.2 to 3 in increments of 0.1 [0.2,0.3,...3] so that the length is still 28 but the ticks aren't [0,1,2] but rather [0.2,0.3,..3]

Thanks!

Answer 1

Following this documentation page, one way to achieve it is:

import numpy as np
from PIL import Image
import plotly.graph_objects as go

N = 28
a = 255 * np.random.random((N, N))
pil_img = Image.fromarray(a).convert('RGB')
fig = go.Figure(data = [go.Scatter(x=[0,10,10,0], y=[0,0,10,10], fill="toself"),go.Image(z=pil_img)])

fig.update_layout(
    xaxis = dict(
        tickmode = 'array',
        tickvals = np.arange(N),
        ticktext = ["{:.1f}".format(t) for t in np.linspace(0.3, 3, N)]
    ),
    yaxis = dict(
        tickmode = 'array',
        tickvals = np.arange(N),
        ticktext = ["{:.1f}".format(t) for t in np.linspace(0.3, 3, N)]
    )
)
fig