mini-graph-card: Graphs not rendering when card is placed within vertical- or horizontal-stack cards.

Hi!

I’ve come across the bug that’s pretty annoying and I’m out of ideas how to fix it. I have an issue with rendering the graphs when mini-graph-card is being placed in either vertical-stack or horizontal-stack. It’s behaving exactly the same way on Safari and within the iOS app. I tried clearing the cache, restarting HA and others, but with no success… It’s worth to mention that I do not experience the above issue when graphs are not stacked with other cards. The strange part is that it renders correctly after switching to another tab (lovelace view) and going back to the one with graphs.

Here are the steps to reproduce it on my setup:

Reload the page.

See that there are no graphs.

Switch views back-and-forth

Graphs are visible.

My code:

cards:
  - animate: false
    cache: true
    decimals: 1
    entities:
      - color: '#0a84ff'
        entity: sensor.garaz_front_temperature
        index: 0
        show_fill: false
        show_indicator: false
        show_state: true
      - color: '#30d158'
        entity: sensor.salon_temperature
        index: 1
        show_fill: false
        show_indicator: false
        show_state: true
    font_size: 75
    font_size_header: 14
    hour24: true
    hours_to_show: 6
    line_width: 9
    name: Temperatura
    points_per_hour: 2
    show:
      icon: true
      labels: false
      legend: false
    type: 'custom:mini-graph-card'
    update_interval: 300
  - animate: false
    decimals: 1
    entities:
      - color: '#0a84ff'
        entity: sensor.garaz_front_humidity
        index: 0
        show_fill: false
        show_indicator: false
        show_state: true
      - color: '#30d158'
        entity: sensor.salon_humidity
        index: 1
        show_fill: false
        show_indicator: false
        show_state: true
    font_size: 75
    font_size_header: 14
    hour24: true
    hours_to_show: 6
    line_width: 9
    name: Wilgotność
    points_per_hour: 2
    show:
      icon: true
      labels: false
      legend: false
    type: 'custom:mini-graph-card'
    update_interval: 300
type: horizontal-stack

Thanks!

PS I’m running the latest version of HA and mini-graph-card.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 28 (6 by maintainers)

Most upvoted comments

Are you all using the update_interval option? Try without it.

That helped! Thanks 😃

fi-sch on May 21, 2020

Stack contains a picture-elements card with mini-graph-card included and a glance card. The glace card renders fine but the picture-elements throws an error saying that a is undefined. Furthermore I do not use update_interval at all:

Possibly related with https://github.com/kalkih/mini-graph-card/issues/358, fixed with https://github.com/kalkih/mini-graph-card/pull/359, will be fixed with the next HA version or the next version of this card, whichever comes first.

kalkih on May 24, 2020

Okay, yes update_interval seems broken when used inside stacks, will have to investigate that further, but yeah, skip that option for now 😉

kalkih on May 21, 2020

Are you all using the update_interval option? Try without it.

kalkih on May 21, 2020

I’m experiencing the same problem as anyone else here. So rendering is sometimes showing but quite often I have to refresh the page or navigate to another panel first. One thing I noticed is that this problem does not occur when using the custom vertical stack component https://github.com/ofekashery/vertical-stack-in-card.

Thanks for the idea, I noticed that it´s enough to put it as a single card inside the custom vertical stack, and that custom vertical stack can be part of the ordinary vertical stack (like if you want the padding of that)

That is a nice workaround indeed 😃. It’s not that I necessarily want to have the padding but my code gets quite long and “unreadable” when all cards are shown the same time (happening with the custom component). With the normal vertical stack I can see it for each card individually.

bearded22 on May 20, 2020

I’m experiencing the same problem as anyone else here. So rendering is sometimes showing but quite often I have to refresh the page or navigate to another panel first.

One thing I noticed is that this problem does not occur when using the custom vertical stack component https://github.com/ofekashery/vertical-stack-in-card.

bearded22 on May 20, 2020