Hoverlabel takes up neighboring datapoint

Dash Python
1

I made a scatter plot that has a dotted line in the end to show that the data for the current day is not complete yet (since the current day is not over) using x unified hoverlabel.
For that I had to add three traces (per color):

  • one solid trace
  • one dotted trace with deactivated hoverlabel
  • one marker-only trace for the last day

This works when I’m zoomed in enough

Screenshot 2025-01-23 at 11.28.15
Screenshot 2025-01-23 at 11.28.15764×662 21.7 KB

However, when I zoom out, the hoverlabel takes up the neighboring datapoint with the wrong date

Screenshot 2025-01-23 at 11.28.44
Screenshot 2025-01-23 at 11.28.44636×478 22.2 KB

Screenshot 2025-01-23 at 11.28.58
Screenshot 2025-01-23 at 11.28.58638×436 24.4 KB

Here is my code:

    if end_date == str(date.today()):
        # add a new trace with only markers for today
        fig.add_trace(
            go.Scatter(x=df_messages[mask_msg_today]["date"], y=df_messages[mask_msg_today]["count"], name='Nachrichten', hovertemplate="Nachrichten: %{y: .0f} (unvollständig)<extra></extra>", showlegend=False, mode='markers', marker=dict(color="#ff5100"), line=dict(color="#ff5100", dash='dot'))
        )
        fig.add_trace(
            go.Scatter(x=df_links[mask_link_today]["date"], y=df_links[mask_link_today]["count"], name='Links', mode='markers', hovertemplate="Links: %{y: .0f} (unvollständig)<extra></extra>", showlegend=False, marker=dict(color="#503a64"), line=dict(color="#503a64", dash='dot'))
        )
        # add a new trace with only lines for today and yesterday without hoverlabels
        fig.add_trace(
            go.Scatter(x=df_messages[mask_msg_today_yd]["date"], y=df_messages[mask_msg_today_yd]["count"], name='Nachrichten', hoverinfo="skip", showlegend=False, mode='lines+markers', marker=dict(color="#ff5100"), line=dict(color="#ff5100", dash='dot'))
        )
        fig.add_trace(
            go.Scatter(x=df_links[mask_link_today_yd]["date"], y=df_links[mask_link_today_yd]["count"], name='Links', mode='lines+markers', hoverinfo="skip", showlegend=False, marker=dict(color="#503a64"), line=dict(color="#503a64", dash='dot'))
        )
    else:
        # update masks

    fig.add_trace(
        go.Scatter(x=df_messages[mask_msg]["date"], y=df_messages[mask_msg]["count"], hovertemplate="Nachrichten: %{y: .0f}<extra></extra>", name='Nachrichten', mode='lines+markers', marker=dict(color="#ff5100"), line=dict(color="#ff5100"))
    )
    fig.add_trace(
        go.Scatter(x=df_links[mask]["date"], y=df_links[mask]["count"], name='Links', hovertemplate="Links: %{y: .0f}<extra></extra>", mode='lines+markers', marker=dict(color="#503a64"), line=dict(color="#503a64"))
    )