Sensor not displaying when stacked

I am putting together a card that will give me the current conditions on the water to see if it might be a good time to go sailing.

I have the collection of sensors working on their own tab, but the tab is pretty empty and I thought grouping the sensors into a single card and putting that card on the Weather tab made sense.

So I decided to use a Vertical Stack card with a nested Horizontal Stack. Every sensor displays properly except 1, the Water Temperature sensor.
I am using the mini-graph-card to display the information. The graph line is displayed properly but the Numbers showing the temp are missing. If you click on the sensor the pop-up shows the temperature.
I copied the code from the working tab to the card which I placed in a new tab for testing

Here is what it look like:

Here is the same sensor working:
HA - Capture 2

Here is the non-working code:

  - icon: mdi:sail-boat
    title: Sailing 2
    cards:

      - type: vertical-stack
        title: Sailing Conditions
        cards:
          - type: custom:mini-graph-card
            name: Wind Speed
            icon: mdi:weather-windy
            entities:
              - entity: sensor.wind_speed
                name: Wind
            show:
              legend: false
            color_thresholds:
              - value: 8
                color: "#2b89c0"
              - value: 16
                color: "#32c02b"
              - value: 24
                color: "#c02d2b"
          - type: horizontal-stack
            cards:
              - type: custom:mini-graph-card
                entities:
                  - sensor.temperature
                line_color: blue
                line_width: 8
                font_size: 75
              - type: custom:mini-graph-card
                entities:
                  - sensor.humidex
                line_color: '#e74c3c'
                line_width: 8
                font_size: 75
              - type: custom:mini-graph-card
                entities:
                  - sensor.water_temp
                name: Water Temp
                line_color: var(--accent-color)
                line_width: 8
                font_size: 7
          - type: horizontal-stack
            cards:
              - type: custom:mini-graph-card
                entities:
                  - sensor.wave_height
                icon: mdi:waves
                line_color: blue
                line_width: 8
                font_size: 75
                name: Wave Height
              - type: custom:mini-graph-card
                entities:
                  - sensor.uv_index
                icon: mdi:weather-sunny-alert
                line_color: '#e74c3c'
                line_width: 8
                font_size: 75
              - type: custom:mini-graph-card
                entities:
                  - sensor.pressure
                icon: mdi:gauge
                line_color: var(--accent-color)
                line_width: 8
                font_size: 75

what is this var? Does it work if you replace with an actual value (e.g. ‘#e74c3c’)?

I changed the

var(–accent-color)

to

line_color: ‘#e8c527

Unfortunately there was no change except the line is now lighter yellow :slight_smile:

Thanks I wasn’t sure as it was the only thing that appeared different. Can you share the config that works so I can compare?

oh and the other thing that’s different is that you’ve given a name to your water temp card. Can you try to either enclose the name in quote or remove the name to see if it changes things?
I’ve not tested, just trying to see what’s different with that card…

Here’s the working config:

      - type: custom:mini-graph-card
        name: Wind Speed
        icon: mdi:weather-windy
        entities:
          - entity: sensor.wind_speed
            name: Wind
        show:
          legend: false
        color_thresholds:
          - value: 8
            color: "#2b89c0"
          - value: 16
            color: "#32c02b"
          - value: 24
            color: "#c02d2b"

      - type: horizontal-stack
        cards:
          - type: custom:mini-graph-card
            entities:
              - sensor.temperature
            line_color: blue
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.humidex
            line_color: '#e74c3c'
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.water_temp
            name: Water Temp
            line_color: var(--accent-color)
            line_width: 8
            font_size: 75

      - type: horizontal-stack
        cards:
          - type: custom:mini-graph-card
            entities:
              - sensor.wave_height
            line_color: blue
            line_width: 8
            font_size: 75
            name: Wave Height
          - type: custom:mini-graph-card
            entities:
              - sensor.uv_index
            line_color: '#e74c3c'
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.pressure
            line_color: var(--accent-color)
            line_width: 8
            font_size: 75

I’ve placed the name in quotes: name: ‘Water Temp’

The number still does not appear.,

I commented out the name line with no change (other than the terrible name now) :slight_smile:

I’m sorry I have no idea :frowning:
What if you bring the water temp tile at the beginning of the horizontal stack, does it change anything?

I swapped the water temp sensor with the air temp sensor (position 1 and 3) and the air temp had the same issue.

So the problem was with position 3. Took a closer look and the font size for position 3 was ‘7’. The font size for all the others ‘79’.

Looks like I missed the 9 when I was copy and pasting.

Added the 9 back in and presto, I can see the digit’s now!

Thanks for the assist lolouk44!

1 Like