Line charts show all data as a single vertical line on the left of the graph

[DaveTSG]

Checklist

• [ x ] I updated the card to the latest version available
• [ x ] I cleared the cache of my browser
• [ x ] I verified that I'm really running the lastest version in my browser console
• [ x ] I checked if there is another issue opened with the same problem

Describe the bug
I have an intermittent issue in which my line graphs are displayed as a single vertical line at the far left of the plot.
This happens on both desktop and phone, using both Safari and Chrome (on both a desktop Mac computer and an iPhone), Chrome on an Android phone, and the Home Assistant companion apps (Mac, iPhone, and Android).
This is intermittent, but happens more frequently than not.
I am able to refresh the Home Assistant dashboard and ~10% of the time, it'll load correctly. 90% of the time, though, this error occurs.

Meanwhile, I have a Home Assistant "history" card for the same data, that displays perfectly fine in the same dashboard.

Version of the card
Version: 2.1.2

Home Assistant versions

Core: 2024.7.4
Supervisor: 2024.06.2
Operating System: 12.4
Frontend: 20240710.0

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
header:
  show: true
  title: Solar wind speed and density
  show_states: true
  colorize_states: false
apex_config:
  legend:
    position: top
    horizontalAlign: center
    offsetX: -80
    offsetY: 0
experimental:
  brush: true
brush:
  selection_span: 8h
graph_span: 72hr
chart_type: line
series:
  - entity: sensor.solar_wind_speed
    name: Wind speed
    yaxis_id: speed
    stroke_width: 1
    color: green
    show:
      in_brush: true
      extremas: false
      legend_value: true
  - entity: sensor.solar_wind_density
    name: Density
    yaxis_id: density
    stroke_width: 1
    color: orange
    show:
      in_brush: true
      extremas: false
      legend_value: true
show:
  last_updated: true
  loading: true
yaxis:
  - id: speed
    show: true
  - id: density
    show: true

Screenshots

First screenshot shows the line graph in the dashboard, with a single vertical line at the far left of the plot:

Second screenshot shows the card configuration. The graphs are shown correctly here.

Expected behavior
The graphs should appear correctly, e.g. as per the second screenshot, above.

Desktop (please complete the following information):

• Browser: Chrome v127.0.6533.89, Safari v17.5.
• Home Assistant desktop app (Mac)

Smartphone (please complete the following information):

• Device: Apple iPhone 8, Samsung Galaxy S22 Ultra
• OS: iOS v16.7.8, Android v14
• Browser: both Chrome and Safari
• Home Assistant mobile app for both iOS and Android

[DaveTSG]

Update regarding this issue.
I just realised what is happening. The graph is loaded zoomed wayyyyy out.
When this error occurs, I can zoom in on the data using the brush graph. That causes the main graph to be updated and display correctly. However, the "zoom window" (for want of a better term) isn't actually displayed when the error occurs. I can click and drag on it with a mouse, if viewing on a computer, and that then causes the "zoom window" to be displayed. This of course doesn't work on a phone/tablet without a mouse.

Hope this helps narrow down the cause of the issue.

[skywalkerisnull]

Just adding, I have the same issue. On the same dashboards, it can impact one but not all and it appears to be random which one(s) it will impact:

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[DaveTSG]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

Not stale.