Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[alessandro.bardi]

Hi guys,
i’ve tried to install two chips animated card on my HA dashboard but there is something wrong.
Both icons are statics.

Flash and solar panel icons:

This is my code:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.sensore_potenza_casa_w
    icon: mdi:lightning-bolt
    icon_color: amber
    primary: Charge
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: charge 1s linear infinite;
          }
          @keyframes charge {
            0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
            5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
          }
  - type: entity
    entity: sensor.potenza_prodotta_fotovoltaico_realtime_watt
    icon: mdi:solar-power-variant
    icon_color: amber
    primary: Solar Panel
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: rays 2s infinite;
          }
          @keyframes rays {
            0%, 100% { clip-path: inset(0 0 0 0); }
            80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
          }

Thanks in advance for any help.
Regards,

Alessandro

[dimitri.landerloos]

try like this:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.sensore_potenza_casa_w
    icon: mdi:lightning-bolt
    icon_color: amber
    primary: Charge
  - type: entity
    entity: sensor.potenza_prodotta_fotovoltaico_realtime_watt
    icon: mdi:solar-power-variant
    icon_color: amber
    primary: Solar Panel
card_mod:
  style: 
    mushroom-entity-chip:nth-child(1)$: | 
      ha-state-icon {
        animation: charge 1s linear infinite;
      }
      @keyframes charge {
        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
        5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      }
    mushroom-entity-chip:nth-child(2)$: | 
      ha-state-icon {
        animation: rays 2s infinite;
      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

For chip animations you have to target the specific chip by drilling down from the main chip card. you cant target it via the specific chip itself.

[VCTGomes (Vitor Gomes)]

Tks! It’s in the center, but not where I would like

I’d like the CPU info where the red circle is on picture and the mainly info (Jellyfin) do without those gray borders.

This is the code I’m using:

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Jellyfin
        secondary: '115'
        icon: phu:jellyfin
        tap_action:
          action: url
          url_path: https://jellyfin.vctgomes.com:8015
      - type: custom:mushroom-chips-card
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 49px;
            margin-top: 12px;
          }
        chips:
          - type: entity
            style: |
              ha-card {
                border: none;
              }
            icon_color: black
            entity: sensor.lxc_jellyfin_115_cpu_em_uso
        alignment: center

[dimitri.landerloos]

Try and set your :

allignment: end

Is it now centered properly?

It is for me.

And for the icon background removal you can use this:

      card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: transparent !important;
            }

[VCTGomes (Vitor Gomes)]

This way?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Jellyfin
        secondary: '115'
        icon: phu:jellyfin
        tap_action:
          action: url
          url_path: https://jellyfin.vctgomes.com:8015
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: transparent !important;
            }
        chips:
          - type: entity
            style: ''
            icon_color: black
            entity: sensor.lxc_jellyfin_115_cpu_em_uso
        alignment: end

I feel like my HA is missing something. I can’t define things as I want.

Look how my card is

[dimitri.landerloos]

Like this:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Jellyfin
        secondary: '115'
        icon: phu:jellyfin
        tap_action:
          action: url
          url_path: https://jellyfin.vctgomes.com:8015
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: transparent !important;
            }
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: none;
              margin-top: 12px;
            }
        chips:
          - type: entity
            style: ''
            icon_color: black
            entity: sensor.lxc_jellyfin_115_cpu_em_uso
        alignment: end

Do you have card mod installed?

[VCTGomes (Vitor Gomes)]

Omg! That’s it! I didn’t have card mod. Now it’s working hehe. Thanks a lot!

[dimitri.landerloos]

Not a problem at all. Happy to help

[mhoogenbosch (Martijn Hoogenbosch)]

I’ve managed to create the count sensors and created the input boolean too. But when I push the down button it doesn’t show the entities. I assumed it get’s the entities from the light group. My light group has 4 lights, could this be the problem?

[dimmuboy]

No problem, I did it by myself

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 14px !important;
            border-width: 0px;
          }
        primary: Living Room
        secondary: >
          Currently:

          {% macro sentence_case(text) %}{{ text[0]|upper}}{{text[1:] |
          replace("_"," ") }}{% endmacro %}

          {% set mode = states('climate.living_room_a_c') %}

          {% if mode == 'off' %}

          {{ sentence_case(mode) }}

          {% elif mode == 'heat_cool' %}

          Heat / Cool

          {% elif mode == 'fan_only' %}

          {{ sentence_case(mode) }}

          {% else %}

          {{ sentence_case(mode) }}ing

          {% endif %}
        icon: |-
          {% set mode = states('climate.living_room_a_c') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat' %}
          mdi:fire
          {% elif mode == 'heat_cool' %}
          mdi:sun-snowflake-variant
          {% elif mode == 'fan_only' %}
          mdi:fan
          {% elif mode == 'dry' %}
          mdi:water-percent
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: |-
          {% set status = states('climate.living_room_a_c') %}
          {% if status == 'off' %}
          grey
          {% elif status == 'cool' %}
          blue
          {% elif status == 'heat' %}
          red
          {% elif status == 'heat_cool' %}
          green
          {% elif status == 'fan_only' %}
          white
          {% elif status == 'dry' %}
          blue
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: more-info
        entity: climate.living_room_a_c
      - type: vertical-stack
        cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
                --st-spacing: 0px;
                border-width: 0px;
              }
              ha-card .current--value {
                color: #ffffff;
              }
              header {
                margin-bottom: 10px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #6f6f6f;
              }
            entity: climate.living_room_a_c
            header:
              name: false
              icon: false
            decimals: '0'
            fallback: 'Off'
            hide:
              temperature: true
              state: true
            layout:
              mode:
                names: false
                icons: false
                headings: false
              step: row
            step_size: '1'
            control: false
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 0px;
        --st-mode-background: #2d2d2d;
        margin-left: 12px;
        margin-right: 12px;
        border-width: 0px;
      }
      ha-card .mode-item.active.off { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item.active.cool { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active.heat_cool { 
        background: #253926;
        color: #4caf50;
      }
      ha-card .mode-item.active.fan_only { 
        background: #494949;
        color: #ffffff;
      }
      ha-card .mode-item.active.dry { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.living_room_a_c
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    control:
      hvac:
        'off':
          name: Power
        heat:
          name: Heat
        cool:
          name: Cool
        heat_cool:
          name: Auto
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
        --chip-padding: 0 0.2em;
      }
    alignment: justify
    chips:
      - type: template
        content: '{{states(''sensor.livingroom_temp'')}} °C'
        entity: sensor.livingroom_temp
        icon: mdi:home-thermometer
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states('climate.living_room_a_c') %}
          {% if state=='cool' %}
          blue
          {% elif state=='heat' %}
          red
          {% elif state=='heat_cool' %}
          green
          {% elif state=='fan_only' %}
          white
          {% elif state=='dry' %}
          blue
          {% else %}
          grey
          {% endif %}
        style: |
          ha-card {
            margin-left: 6px;
            border-width: 0px !important;
          }
      - type: template
        double_tap_action:
          action: none
        content: '{{ states(entity) }}%'
        entity: sensor.living_room_a_c_relative_humidity_measurement
        icon: mdi:home-percent
        icon_color: blue
        tap_action:
          action: more-info
        style: |
          ha-card {
            border-width: 0px !important;
          }
      - type: template
        entity: climate.living_room_a_c
        content: |
          {{ state_attr(entity, 'fan_mode') }}
        icon: mdi:fan
        icon_color: green
        tap_action:
          action: more-info
        style: |
          ha-card {
            border-width: 0px !important;
          }
      - type: weather
        entity: weather.openweathermap
        show_conditions: true
        show_temperature: false
        style: |
          ha-card {
            border-width: 0px !important;
          }
      - type: template
        icon: |-
          {% if is_state(entity, 'off') %}
            mdi:chevron-down
          {% elif is_state(entity, 'on') %}
            mdi:chevron-up
          {% endif %}
        tap_action:
          action: toggle
        entity: input_boolean.thermostat_dropdown
        icon_color: disabled
        style: |
          ha-card {
            --chip-icon-size: 1em;
            border-width: 0px !important;
          }
  - type: conditional
    conditions:
      - entity: input_boolean.thermostat_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      keep:
        margin: false
        box_shadow: false
        background: false
      style: |
        ha-card {
          border-width: 0px;
        }
      cards:
        - type: grid
          square: false
          columns: 3
          cards:
            - type: custom:mushroom-entity-card
              entity: sensor.bedroom_temp
              primary_info: state
              secondary_info: name
              name: Inside
              icon_color: green
              style: |
                ha-card {
                  border-width: 0px;
                }
            - type: custom:mushroom-entity-card
              entity: sensor.home_outdoor_temperature
              primary_info: state
              secondary_info: name
              name: Outside
              icon_color: blue
              style: |
                ha-card {
                  border-width: 0px;
                }
            - type: custom:simple-thermostat
              style: |
                ha-card {
                  --st-font-size-toggle-label: 6px
                  --st-spacing: 0px;
                  --st-default-spacing: 1.6px;
                  --st-mode-background: #2d2d2d;
                  margin-right: 12px;
                  border-width: 0px;
                }
                ha-card .mode-item.active {
                  background: #363636;
                  color: #212121;
                  border-width: 0px;
                }
                ha-card .mode-item.active.windFree {
                  background: #1d3447;
                  color: #2196f3;
                  border-width: 0px;
                }
                ha-card .mode-item.active.quiet {
                  background: #607d8b;
                  color: #263238;
                  border-width: 0px;
                }
                ha-card .mode-item.active:hover {
                  background: #363636;
                  color: #9e9e9e;
                }
                ha-card .mode-item:hover {
                  background: #363636;
                  color: #9e9e9e;
                }
                ha-card .mode-item {
                  --st-spacing: 6px;
                  border-radius: 10px;
                }
                ha-card .modes {
                  grid-gap: 12px
                }
              entity: climate.living_room_a_c
              header: false
              setpoints: false
              hide:
                temperature: true
                state: true
              layout:
                mode:
                  headings: false
                  icons: true
                  names: false
                step: row
              control:
                preset:
                  speed: false
                  sleep: false
                  windFreeSleep: false
                  motionDirect: false
                  motionIndirect: false
                  windFree:
                    icon: mdi:weather-windy
                  quiet:
                    icon: mdi:volume-off
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.bedroom_temp
              name: Inside Temperature
              color: '#4caf50'
            - entity: sensor.home_outdoor_temperature
              name: Outside Temperature
              color: '#2196f3'
              y_axis: secondary
          hours_to_show: 24
          line_width: 3
          font_size: 50
          animate: true
          show:
            name: false
            icon: false
            state: false
            legend: false
            fill: fade
          style: |
            ha-card {
              border-width: 0px;
            }

[Numotiv (Tyler)]

You need to make some conditional cards in a grid. Then set them to show when the input is on.

  - type: conditional
    conditions:
      - entity: input_boolean.living_room_toggle
        state: 'on'

[Krispkiwi]

What’s the speaker in relevance to?

[dimmuboy]

There’re presets for windfree and quiet mode

[jianyu-li]

I’m trying to do content_info: area but it doesn’t seem to work. Is there a way to do this?

[1umnyy (Viktor)]

Please tell me what the problem is? He should first run the script, and then open the application and execute commands in it, but he does not do this.

type: custom:mushroom-template-card
primary: Обычный звонок
secondary: ''
icon: mdi:phone
icon_color: green
tap_action:
  action: url
  url_path: >
    [[[ hass.callService("script", "1688164645705"); return
    "ya-search-app-open://path?uri=messenger://call/create/private?device_id=secret"
    ]]]

[alessandro.bardi]

Thanks for reply @dimitri.landerloos
It’s incredible but this morning all works as it should with your code (but i’ve done a mistake with others two chip card).

Now, i’ve paste your code but icons doesn’t animated anymore

My code:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.sensore_potenza_casa_w
    icon: mdi:lightning-bolt
    icon_color: amber
    primary: Charge
  - type: entity
    entity: sensor.potenza_prodotta_fotovoltaico_realtime_watt
    icon: mdi:solar-power-variant
    icon_color: amber
    primary: Solar Panel
    card_mod:
      style:
        mushroom-entity-chip:nth-child(1)$: |
          ha-state-icon {
            animation: charge 1s linear infinite;
          }
          @keyframes charge {
            0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
            5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
          }
        mushroom-entity-chip:nth-child(2)$: |
          ha-state-icon {
            animation: rays 2s infinite;
          }
          @keyframes rays {
            0%, 100% { clip-path: inset(0 0 0 0); }
            80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
          }
  - type: entity
    entity: sensor.temperatura_esterna_meteonetwork
    use_entity_picture: false
  - type: entity
    entity: sensor.umidita_esterna_meteonetwork
alignment: justify

Thanks for the patience.
Regards,

Alessandro

[dimitri.landerloos]

Not a problem.

You need to move your card mod code to the bottom and to the main chip card. Not to the individiual chip.

Like this:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.sensore_potenza_casa_w
    icon: mdi:lightning-bolt
    icon_color: amber
    primary: Charge
  - type: entity
    entity: sensor.potenza_prodotta_fotovoltaico_realtime_watt
    icon: mdi:solar-power-variant
    icon_color: amber
    primary: Solar Panel
  - type: entity
    entity: sensor.temperatura_esterna_meteonetwork
    use_entity_picture: false
  - type: entity
    entity: sensor.umidita_esterna_meteonetwork
alignment: justify
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
        animation: charge 1s linear infinite;
      }
      @keyframes charge {
        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
        5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        animation: rays 2s infinite;
      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

[alessandro.bardi]

Fixed!
Thank you so much for your support
Best regards,

Alessandro

[Fe1sar]

I’m trying to change the icon background shape in my mushroom template card to make it wider.
A bit like the ones in the example below:

I’ve been experimenting with the icon styles in card mod but I can’t seem to find which parameter I need for this.
Any suggestions?

[BMWAddict (Jasper)]

Hi All, stupid question but how do I add a more fancy mushroom graph for temp history (24 hours)? There is no template available, so should I be adding it as a mushroom template card? How to get a graph ?

I’m now using the standard history graph option from home assistant - but it looks terrible and is big.

edit: so not the Mushroom Climate Card (this works good btw) but a historical graph of 24 hours up to know to show temps in different rooms.

So what mushroom template card to add to create a graph like below - but in mushroom style (not default HA). I’ve tried via chips but there is no graph option.