go.Heatmap text are overlapped

[RyanLin]

Like this figure, dispaly on iphone had some text overlapped

But display on computer is OK.

Why and how to resolve it?

My code:

def plot_monthly_twrr_heatmap(df: pl.DataFrame, window_width: int):
title_size, title_y, legend_size, legend_x, legend_y, tick_size = judge_font_size(
window_width
)

    df = df.pivot(index="year", on="month", values="twrr")

    x = [f"{i}月" for i in df.drop("year").columns]
    y = df["year"].to_list()
    z = df.drop("year").to_numpy()

    fig = go.Figure()
    fig.add_trace(
        go.Heatmap(
            x=x,
            y=y,
            z=z,
            text=z,
            texttemplate="%{text:+.1%}",
            textfont=dict(size=tick_size),
            hoverongaps=False,
            hovertemplate="%{y}年%{x}<br>%{z:+.1%}<extra></extra>",
            showscale=True if window_width > 500 else False,
            hoverlabel=dict(font=dict(size=legend_size)),
        )
    )

    fig.update_layout(
        title=dict(
            text=f"平均月報酬: {avg_twrr:+.1%} 月勝率: {win_rate:.1%}",
            font=dict(size=title_size),
        ),
        **UPDATE_LAYOUT,
    )
    fig.update_layout(margin=dict(l=0, r=0, t=60, b=10))
    fig.update_xaxes(showgrid=False, dtick=1, tickfont=dict(size=tick_size), side="top")
    fig.update_yaxes(showgrid=False, dtick=1, tickfont=dict(size=tick_size))

    return fig