Graph only shows up after navigating to different dashboard and back again

[Aephir]

Checklist

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

Describe the bug
Whenever I first go to a specific dashboard (or whenever I force-reload that dashboard), my chart won’t populate data.

I need to navigate to a different dashboard and back in order for the data to show up (see video):

This is 100% consistent.

It doesn’t work with navigation to a different view in the same dashboard, and it works 100% of he time if I navigate to ANY other dashboard and back. Also, 100% of the times I force-reload while on the page, the graph disappears again until after I change dashboard.

Version of the card
Version: 2.0.4

To Reproduce
This is the configuration I used:

This is the lovelace card in question:

type: custom:tabbed-card
options: {}
tabs:
  - label: Electricity prices
    card:
      type: custom:apexcharts-card
      header:
        show: true
        title: Electricity Prices (Total)
        show_states: false
      graph_span: 2d
      now:
        show: true
        color: red
      span:
        start: day
      series:
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_tomorrow.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_tomorrow.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
      yaxis:
        - min: 0
    attributes:
      icon: mdi:currency-eur
      show_name: false
      show_icon: true
      show_state: false
  - label: Electricity use
    card:
      type: custom:sankey-chart
      show_names: true
      sections:
        - entities:
            - entity_id: sensor.home_power_consumption
              name: Total
              children:
                - sensor.dishwasher_power_consumption_w
                - sensor.dryer_power_w
                - sensor.openevse_current_power_usage
                - sensor.basement_media_power_electric_consumption_w
                - sensor.office_electric_consumption_w
                - sensor.shed_power_electric_consumption_w
                - sensor.wemo_outdoor_current_power
                - sensor.all_lights_power_w
                - sensor.all_speakers_power_w
                - sensor.all_switches_power_w
                - sensor.server_power_w
        - entities:
            - sensor.dishwasher_power_consumption_w
            - sensor.dryer_power_w
            - sensor.openevse_current_power_usage
            - sensor.basement_media_power_electric_consumption_w
            - sensor.office_electric_consumption_w
            - sensor.shed_power_electric_consumption_w
            - sensor.wemo_outdoor_current_power
            - sensor.all_lights_power_w
            - sensor.all_speakers_power_w
            - sensor.all_switches_power_w
            - sensor.server_power_w
    attributes:
      icon: mdi:lightning-bolt
      show_name: false
      show_icon: true
      show_state: false
  - label: Electricity chart
    card:
      type: vertical-stack
      cards:
        - type: gauge
          entity: sensor.home_power_consumption
          min: 0
          name: Current Electricity Usage
          max: 5000
          needle: true
          severity:
            green: 0
            yellow: 750
            red: 2500
        - type: custom:config-template-card
          variables:
            - entity: sensor.openevse_current_power_usage
              name: Car Charger
            - entity: sensor.all_lights_power_w
              name: Lights
            - entity: sensor.all_speakers_power_w
              name: Speakers
            - entity: sensor.all_switches_power_w
              name: Switches
            - entity: sensor.basement_media_power_electric_consumption_w
              name: Basement Media
            - entity: sensor.office_electric_consumption_w
              name: Office
            - entity: sensor.shed_power_electric_consumption_w
              name: Shed
            - entity: sensor.dishwasher_power_consumption_w
              name: Dishwasher
            - entity: sensor.dryer_power_w
              name: Dryer
            - entity: sensor.espresso_electric_consumption_w
              name: Espresso
            - entity: sensor.wemo_outdoor_current_power
              name: Chicken Coop
            - entity: sensor.server_power_w
              name: Server & Network
          entities:
            - sensor.openevse_current_power_usage
            - sensor.all_lights_power_w
            - sensor.all_speakers_power_w
            - sensor.all_switches_power_w
            - sensor.basement_media_power_electric_consumption_w
            - sensor.office_electric_consumption_w
            - sensor.dishwasher_power_consumption_w
            - sensor.dryer_power_w
            - sensor.espresso_electric_consumption_w
            - sensor.shed_power_electric_consumption_w
            - sensor.wemo_outdoor_current_power
            - sensor.server_power_w
          element:
            type: custom:bar-card
            entities: >-
              ${vars.filter(v => states[v.entity].state > 0).sort((v1,v2) =>
              states[v2.entity].state-states[v1.entity].state)}
            direction: right
            entity_row: true
            min: 0
            max: ${ Math.max(...vars.map(v => states[v.entity].state))}
            height: 20px
            stack: vertical
            decimal: 1
            icon: mdi:flash
            positions:
              icon: 'off'
              indicator: outside
              name: inside
              value: inside
            severity:
              - color: '#a1a1a18a'
                from: 0
                to: 2
              - color: '#3ea8328a'
                from: 2
                to: 10
              - color: '#85a8328a'
                from: 10
                to: 50
              - color: '#a8a4328a'
                from: 50
                to: 200
              - color: '#a887328a'
                from: 200
                to: 500
              - color: '#a867328a'
                from: 500
                to: 1000
              - color: '#a846328a'
                from: 1000
                to: 3000
              - color: '#a832328a'
                from: 3000
                to: 10000
            style: "states > * {\n  margin: 1px;\n}\nbar-card-name,\nbar-card-value {\n  font-size: 0.9rem;\n  color: '#ffffffaa';\n  font-weight: bold;\n}\nbar-card-value\t{\n  font-weight: bolder;\n}\nbar-card-indicator {\n  margin-top: 4px;\n  transform: scaleY(-1);\n}"
    attributes:
      icon: mdi:gauge-low
      show_name: false
      show_icon: true
      show_state: false

Screenshots
In this video, I:

1. Load the dashboard (no graph)
2. Navigate to the Energy dahsbaord and back again (graph appears)
3. Force reload (no graph)
4. Navigate to a different dashboard and back (graph appears again)
   

Expected behavior
Shows the graph without having to navigate to another dashboard and back first

Desktop (please complete the following information):

• Browser Firefox and Chrome. In Safari, it also happens after clearing cache, but after a "reload" (apparently there's no "force-reload" keyboard combination?), it seems to work without navigating to a different dashbaord. But every time I clear cache, the problem is also present in Safari.
• Version Firefox v116.0.2 (and several previous), Chrome v115.0.5790.170, Safari v16.6 (18615.3.12.11.2)

Smartphone (please complete the following information):

• Device: Android
• OS: EMUI 12.0.0
• Browser: Using App.
• Version: 2023.7.5-full

Additional context
Also described here.

[RomRider]

Does it happen when the card is outside of the custom:tabbed-card?
Is there a message in the javascript console?

[Aephir]

Hmm, this does indeed seem to be related to the tabbed-card.

But probably the combination with the Apexcharts, since data from e.g. the sankey-chart in the same "tabbed card" doesn't have this issue.

I've added a "crossover" issue at the tabbed-card repo.

Stupid question, but where is the javascript console?

[RomRider]

I'm pretty sure, because apexcharts-card is quite heavy, that the hass object is not assigned to the card and the issue is probably in those lines:
https://github.com/kinghat/tabbed-card/blob/main/src/tabbed-card.ts#L92-L101 (missing waiting for the _createTabs promise to be resolved?)

To show the javascript console, it depends on your browser, check on Google ;)

[Aephir]

Ahh, in browser:) I though I should look for something in HA UI...

There are a lot of warnings from apexcharts-card.js, mostly Unexpected value NaN parsng height attribute. But upon a force-refresh, I see some errors related to the tabbed card (I have added in the issue in that repo).

The apexcharts-card.js warnings appear when I switch back and forth between dashboards, and are not present immediately upon force-refresh of browser.

[Aephir]

I noticed something trying to troubleshoot for the issue in the tabbed-card repo; it is only a problem if I add more data series to a graph.

So this (simplified with only 2 of the series) doesn't work:

type: custom:tabbed-card
options: {}
tabs:
  - label: Electricity prices
    card:
      type: custom:apexcharts-card
      header:
        show: true
        title: Electricity Prices (Total)
        show_states: false
      graph_span: 2d
      now:
        show: true
        color: red
      span:
        start: day
      series:
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
      yaxis:
        - min: 0
    attributes:
      icon: mdi:currency-eur
      show_name: false
      show_icon: true
      show_state: false

but this (with only one of the series) does work, also inside the tabbed-card:

type: custom:tabbed-card
options: {}
tabs:
  - label: Electricity prices
    card:
      type: custom:apexcharts-card
      header:
        show: true
        title: Electricity Prices (Total)
        show_states: false
      graph_span: 2d
      now:
        show: true
        color: red
      span:
        start: day
      series:
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
      yaxis:
        - min: 0
    attributes:
      icon: mdi:currency-eur
      show_name: false
      show_icon: true
      show_state: false

Update: It also seems to only be a problem when I have multiple data series in the apexcharts-card, see my comment here

[Aephir]

Update: An alpha release of the tabbed-card (here) seems to have fixed, so I'm assuming the issue was there, not in the apexcharts-card.

I'll close this issue.