Few gauge cards in one card

Share your Projects! Dashboards & Frontend
1

Hi! I’ve 9 gauge cards in one view (and there will be more), but they look a bit messy and confusing. So I’d like to divide them in to separate cards, i.e. 3 gauges in 1st card with headline, another 2 in 2nd card with different headline, etc. Can you help me with that? I tried to find a solution but no luck.

2

you need to use the vertical stack card:

3 

- type: entities
  title: First card
  entities:
    - type: custom:hui-gauge-card
      ... normal configuration of gauge 1...
    - type: custom:hui-gauge-card
      ... normal configuration of gage 2 ...
...etc...

Be aware, though, that this works by accident not by design, so it could break any time.

4

@thomasloven, is there any new gauge card?
I have - type: gauge from the core and - type: custom:gauge-card but never seen
-type: custom:hui-gauge-card

5

It’s a trick. hui-gauge-card is the internal name of the core gauge card, and by using custom: you can trick the entities card to show a card instead of an entity row.

Again - this is not in any way a supported feature. It just happens to work for now.

6

Does it still work?
Tried:

- type: entities
  title: First card
  entities:
    - type: custom:hui-gauge-card
      theme: default
      entity: sensor.temperatur
      severity:
        red: 10
        yellow: 20
        green: 30

But I got “No card type found”

7

That error means that type: is missing entirely. I’d look carefully for typos if I were you.

Also see: https://github.com/thomasloven/hass-config/wiki/Misc-tricks#cardelemententity-row-triality

8

old thread, but still works in 2022.
Allows standard gauge card to be shown as entity rows in an entities card

1 Like
9

Well day.
i try the multiples hui-gauge-card inside the one card, this method is work:

type: entities
title: Speed Test
entities:
  - type: custom:hui-gauge-card
    theme: default
    entity: sensor.speedtest_download
    severity:
      red: 10
      yellow: 50
      green: 100
    min: 0
    max: 200
  - type: custom:hui-gauge-card
    theme: default
    entity: sensor.speedtest_upload
    severity:
      red: 10
      yellow: 50
      green: 100
    min: 0
    max: 200
  - type: custom:hui-gauge-card
    theme: default
    entity: sensor.speedtest_ping
    severity:
      red: 50
      yellow: 20
      green: 0
    min: 0
    max: 200

but, when i restart my home-assitante, I get this issue:
Screenshot from 2022-09-20 14-43-33

for now i’ll try with vertical stack cards, to solve it.

10

i have the same issue, but then when i click on add card it reappears again, so just using vertical stack to put them on again seems to fix it

11

They’ll work fine with in vertical-stacks no need to refer to them as custom:hui-gauge-card if you do that.

If you want them embedded in an entities card, the old trick is unreliable at best. It requires the element to have already been loaded (hence why it appears to work, then doesn’t).

This will make it work reliably
thomasloven/lovelace-hui-element: :small_blue_diamond: Use built-in elements in the wrong place (github.com)