New combined temperature/humidity Home Assistant card

While searching for improving the way to display temperature and humidity in Home Assistant, I found a new way by using some custom cards.

I personally love the result, especially the gradient when temperature goes up/down. Here it is:

Combined Home Assistant card for temperature and humidity, top row: room title; second row: temperature icon and temperature value on the left, humidity icon and humidity value on the right; third row: graph with humidity in blue in the background and temperature in the frontend with a gradient from blue to yellow according to the temperature

The code (requires stack-in-card, mushroom-entity-card, mini-graph-card and card-mod):

type: custom:stack-in-card
cards:
  - type: markdown
    content: Wohnzimmer
    card_mod:
      style: |
        ha-card {
          border: none;
          font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
        }

        ha-markdown {
          padding-bottom: 0 !important;
        }
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.eve_weather_wohnzimmer_temperatur
        primary_info: state
        secondary_info: name
        name: Temperatur
        icon_color: green
        card_mod:
          style: |
            ha-card {
                border: none;
              }
      - type: custom:mushroom-entity-card
        entity: sensor.eve_weather_wohnzimmer_luftfeuchtigkeit
        primary_info: state
        secondary_info: name
        name: Luftfeuchtigkeit
        icon_color: blue
        card_mod:
          style: |
            ha-card {
                border: none;
              }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.eve_weather_wohnzimmer_luftfeuchtigkeit
        name: Luftfeuchtigkeit
        color: "#2196f3"
        show_line: false
        show_points: false
        y_axis: secondary
      - entity: sensor.eve_weather_wohnzimmer_temperatur
        name: Temperatur
        show_points: false
    hours_to_show: 24
    points_per_hour: 12
    line_width: 3
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    color_thresholds:
      - value: -20
        color: purple
      - value: 0
        color: "#dbeff0"
      - value: 15
        color: "#2196f3"
      - value: 19
        color: "#2196f3"
      - value: 20
        color: "#d6bb57"
      - value: 22
        color: "#c6623e"
      - value: 24
        color: "#ac4231"
      - value: 26
        color: red
    card_mod:
      style: |
        ha-card {
          border: none;
          padding-block-start: 8px !important;
        }
card_mod:
  style: |
    ha-card {
      --stack-card-gap: 0;
    }
Code language: YAML (yaml)

The only thing I’m missing from my previous solution is the way to also show the previous day in comparison.

That is how it looked before. It needed two cards to display temperature and humidity:

Two Home Assistant cards aside of each other. On the left: temperature graphs for today and yesterday; on the right: humidity for today

The code (requires apexcharts-card and card-mod):

type: custom:apexcharts-card
graph_span: 24h
header:
  show: true
  title: Temperatur Wohnzimmer
  show_states: true
color_list:
  - "#a7712e"
  - "#4b68c9"
  - "#ee7a64"
apex_config:
  chart:
    height: 150px
  legend:
    show: false
layout: minimal
all_series_config:
  opacity: 0.2
  stroke_width: 3
  type: area
series:
  - entity: sensor.eve_weather_wohnzimmer_temperatur
    yaxis_id: temp
    name: gestern
    offset: "-24h"
    show:
      offset_in_name: false
    group_by:
      duration: 10min
      func: avg
  - entity: sensor.eve_weather_wohnzimmer_temperatur
    yaxis_id: temp
    name: heute
    group_by:
      duration: 10min
      func: avg
card_mod:
  style: |
    #graph-wrapper {
      margin-bottom: -15px;
      margin-top: -50px;
    }

    #state__value {
      line-height: normal;
    }

    #state__value > #state {
      font-size: 1.5em !important;
    }

    #state__name {
      font-size: 1em !important;
    }
Code language: YAML (yaml)

You can also get my new result nearly with apexcharts-card alone, and thus also with charts for yesterday, but it does not support a gradient on the stroke itself, which is unfortunate.

Thus, I’ll stick to the new one despite losing the graph for yesterday, but it just looks better.

By the way, the original idea and code were from Reddit.