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

[fi-sch]

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:

1. Reload the page.
2. See that there are no graphs.
3. Switch views back-and-forth
4. 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.

[ethank]

Can confirm, seeing this in my install as well.

[kalkih]

And it works as expected outside of vertical/horizontal stacks?

[fi-sch]

@kalkih
Yes it does. I have not-stacked graphs (outside of vertical/horizontal stacks) set up in other views.

I even tried to place a single graph below those that don't render properly (the same view, just another card, one graph, same data). It was rendering properly each time while those that were stacked didn't render (as described above).

[fi-sch]

It behaves exactly the same in desktop browser.

PS It doesn't matter if I use just vertical-stack, horizontal-stack or both of them nested in one card (like example above).
The result is exactly the same – graphs are not rendering when the page was reloaded. After switching the views back-and-forth they appear normally.

[pierrewessman]

Same here, sometimes I can see the graph while editing the code but not in the lovelace view itself.

[bearded22]

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.

[pierrewessman]

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)

[bearded22]

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.

[fi-sch]

Did any of you try the new HA 110.0 release? I'm not able to try it in next few days as I'm not in home and don't want to risk breaking anything. Maybe those huge changes in the frontend have somehow, by coincidence, fixed this issue for us :)

Just be aware. As I can see there are some problems with custom-header plugin under HA 110.0.

[fi-sch]

I'm not sure if it's related to this issue, but each time that I reload the page, I get the following error entry in Logs:

Logger: frontend.js.latest.202004272
Source: components/system_log/__init__.py:209 
First occurred: 14:48:40 (15 occurrences) 
Last logged: 16:49:30

https://hassio.local:8123/hacsfiles/mini-graph-card/mini-graph-card-bundle.js:1:89424 NotSupportedError: Cannot define multiple custom elements with the same tag name

[fi-sch]

Uhh.. I got tempted and did update to HA 110.0.
I'm pretty sad to say that this issue is still valid. I still get the above mentioned error in the logs as well.

@kalkih Any idea why this error occurs?

[kalkih]

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

[fi-sch]

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

That helped! Thanks :)

[kalkih]

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

[reefland]

Been trying to figure out why mini-graph-card has been acting up. I'm on 0.110.1 and have no errors in the log file. But use it in vertical stack and does not render right away... if you let it sit there for a while eventually it will render. But as others say a quick toggle between tabs and it renders right away.

Removing "update_interval: 120" from the card is a decent work around for now.

[schneekluth]

EDIT: Problem solved itself with latest 0.110.2 Release

I'm having trouble too rendering mini-graph-card inside a vertical-stack (vertical-stack-in-card to be precise). 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:

[fi-sch]

I'm having trouble too rendering mini-graph-card inside a vertical-stack (vertical-stack-in-card to be precise). 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:

Probably there's just an 'a' somewhere in your code. Copy&paste all of it.

[kalkih]

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.

[a5pire]

I also have this issue, although I am not using the update_interval feature. Installed via HACS on HA 0.110.0

[kalkih]

There's a new version of HA available 0.110.2, give it a shot, if it's related to the issue mentioned in my previous reply it should be fixed.

[a5pire]

I have updated but unfortunately the issue persists.

[kalkih]

Oh, it's just the graphs that doesn't appear, that will happen when there's no connection the the history database or no history available for that entity. You'll should see the same if you try with the default history card.
Make sure your recorder is setup and working correctly

[fourwallz]

This fixed it for me:

https://community.home-assistant.io/t/no-state-history-found-how-do-i-get-it-back/168449

[wdmnn]

I'm also having issues rendering the graphs - but only on one particular device.

My setup:
Core 0.112.2
Mini Graph Card v0.9.4

Tested with various devices / browsers:
Win10 / Firefox: Everything working as expected
Linux / Firefox: Everything working as expected
Android HA App: Everything working as expected
Android tablet with Chrome: Issue
Android tablet with Wallpanel: Issue

Issue:
If a graph card is placed in a stacked card any graph on this particular view does not show any lines (also individual graph cards). If I click on the graph it displays all the individual data points, so the data itself is there but something isn't working with the rendering of the lines.

As soon as I remove the stacked graph card the lines on the individual graph card are rendered correctly.

Sometimes (and I cannot see a real pattern there) one line is rendered also in the stacked graph card - but only one line out of the configured four entities.

[RestOp]

As soon as I remove the stacked graph card the lines on the individual graph card are rendered correctly.

Try my fix: https://github.com/kalkih/mini-graph-card/issues/422#issuecomment-687414531

[pbavinck]

Same problem here. Hope this gets fixed.