State / Temperature / Humidity / Graph in the same card | Home Assistant | Page 1

frank star Jan 13, 2025, 11:54 AM

#

Hi, I see sometime screenshot with a beautiful card like that.
I would like to reproduce something similar.
How do you do it ? Is that native a custom card or multiple custom cards (card-mod + mini-graph-card + ??) ?
Do you agree to share tome yaml examples ?
Thanks a lot.
Az

unborn harness Jan 14, 2025, 12:48 AM

#

Yes I would also like to know! Looks great

frank star Jan 14, 2025, 9:50 AM

#

Currently, I have that :

#

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-title-card
        subtitle: Salon
      - type: vertical-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.ecran_temperature
            primary_info: state
            secondary_info: none
            icon_color: green
            card_mod:
              style: |
                ha-card {
                  border: none;
                  --spacing: 2px;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.ecran_humidite
            primary_info: state
            secondary_info: none
            icon_color: blue
            card_mod:
              style: |
                ha-card {
                    border: none;
                    --spacing: 2px;
                  }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.ecran_temperature
        name: Temperature
        color: "#00bb33"
    hours_to_show: 24
    points_per_hour: 6
    hour24: true
    line_width: 2
    smoothing: false
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          border: none;
          padding: 0;
        }
        .type-custom-mini-graph-card {
          padding: 0;
        }
card_mod:
  style: |
    ha-card {
      --stack-card-gap: 0;
    }

unborn harness Jan 15, 2025, 2:58 AM

#

frank star Currently, I have that :

thank you! this uses mushroom card?

primal gorge Jan 15, 2025, 11:21 AM

#

frank star Currently, I have that :

How to create "custom:stack-in-card"?

frank star Jan 15, 2025, 4:31 PM

#

I use both : "Mushroom" and "Stack In Card" (by @sleek vigil) HACS addon

crude wadi Jan 16, 2025, 12:13 AM

#

you can accomplish this with the mini-graph-card also, which is available in HACs

#

frank star Jan 22, 2025, 1:22 PM

#

crude wadi

I already use it, but more included with other infos

#

Here my last version:

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.ecran_temperature
        icon_type: none
        name: Salon
        primary_info: name
        secondary_info: last-updated
        fill_container: true
        tap_action: none
        card_mod:
          style: |
            ha-card {
              border: none;
            }
      - type: vertical-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.ecran_temperature
            primary_info: state
            secondary_info: none
            icon_color: green
            card_mod:
              style: |
                ha-card {
                  border: none;
                  --spacing: 2px;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.ecran_humidite
            primary_info: state
            secondary_info: none
            icon_color: blue
            card_mod:
              style: |
                ha-card {
                    border: none;
                    --spacing: 2px;
                  }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.ecran_temperature
        name: Temperature
        color: "#00bb33"
    hours_to_show: 24
    points_per_hour: 6
    hour24: true
    line_width: 2
    smoothing: false
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          border: none;
          padding: 0;
        }
        .type-custom-mini-graph-card {
          padding: 0;
        }
card_mod:
  style: |
    ha-card {
      --stack-card-gap: 0;
    }

#

I use stack card to have 4 of them in one card

primal gorge Feb 4, 2025, 10:03 PM

#

frank star I already use it, but more included with other infos

I used your code to reproduce something similar, but I don't get the same result.

#

#

this is my code:
``type: custom:stack-in-card
cards:

type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
  entity: climate.salone
  icon_type: none
  name: Salone
  primary_info: name
  secondary_info: last-updated
  fill_container: true
  tap_action: none
  card_mod:
  style: |
  ha-card {
  border: none;
  }
- type: vertical-stack
  cards:
  - type: custom:mushroom-entity-card
    entity: sensor.salone_temperatura
    primary_info: state
    secondary_info: none
    icon_color: green
    card_mod:
    style: |
    ha-card {
    border: none;
    --spacing: 2px;
    }
  - type: custom:mushroom-entity-card
    entity: sensor.salone_umidita
    primary_info: state
    secondary_info: none
    icon_color: blue
    card_mod:
    style: |
    ha-card {
    border: none;
    --spacing: 2px;
    }
type: custom:mini-graph-card
entities:
- entity: sensor.salone_temperatura
  name: Temperature
  color: "#00bb33"
- entity: sensor.salone_umidita
  name: Humidity
  color: blue
  y_axis: secondary
  hours_to_show: 6
  points_per_hour: 6
  hour24: true
  line_width: 2
  smoothing: true
  show:
  labels: true
  labels_secondary: true
  name: false
  icon: false
  state: false
  legend: false
  fill: fade
  card_mod:
  style: |
  ha-card {
  border: none;
  padding: 0;
  }
  .type-custom-mini-graph-card {
  padding: 0;
  }
  card_mod:
  style: |
  ha-card {
  --stack-card-gap: 0;
  }
  ``

sage patio Feb 5, 2025, 1:04 AM

#

@primal gorge Just out of curiosity, do you have card-mod installed?

sage patio Feb 5, 2025, 9:51 AM

#

Also, I recommend using stickpin's fork of stack-in-card instead of RomRider's which has not been updated in five years. At least this one was last updated 11 months ago and doesn't need card_mod's help to remove the borders around the cards inside the stack. stickpin/stack-in-card

frank star Feb 6, 2025, 6:18 PM

#

sage patio Also, I recommend using **stickpin**'s fork of stack-in-card instead of **RomRid...

I didn't check all fork, but https://github.com/svemat01/stack-in-card it's a little more updated.

#State / Temperature / Humidity / Graph in the same card