Lovelace Gauge card

Configuration
#1

Today I started to use the Gauge Lovelace card but am having two issues…

  1. Is the scroll bar on the right. How do I get rid of it?
  2. Why are the green and yellow colors (top line gauges) showing up a violet? The last gauge shows Red correctly.

Capture
Capture1284×536 26 KB

# Title of the view. Will be used as the tooltip for tab icon
title: System
# Unique path for direct access /lovelace/${path}
path: system
icon: mdi:laptop-windows
cards:
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
      - type: gauge
        name: CPU Usage
        unit: '%'
        entity: sensor.processor_use
        severity:
          green: 0
          yellow: 50
          red: 85

      - type: gauge
        name: Memory
        unit: '%'
        entity: sensor.memory_use_percent
        severity:
          green: 0
          yellow: 50
          red: 85
          
      - type: gauge
        name: Disk Use
        unit: '%'
        entity: sensor.disk_use_percent
        severity:
          green: 0
          yellow: 50
          red: 85
          
    - type: horizontal-stack
      cards:
      - type: gauge
        name: CPU Temp
        unit: 'F'
        entity: sensor.cpu_temp
        min: 100
        max: 130
        severity:
          green: 100
          yellow: 105
          red: 110
#2

Probably you should search for the proper thread and ask there.

#3

So what is the proper thread?

#4

Have you searched “lovelace gauge card”?

Please, read here before posting.

This is valid for any forum.

#5

No clue about the scrollbar, but the colors depend on your theme.

1 Like
#6

Ok, I’ll add those items to my theme file, thanks.

#7

I added a theme for the gauge but for some reason not showing green or yellow…

Capture
Capture835×481 18.1 KB

# Title of the view. Will be used as the tooltip for tab icon
title: System
# Unique path for direct access /lovelace/${path}
path: system
icon: mdi:laptop-windows
cards:
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
      - type: gauge
        name: CPU Usage
        unit: '%'
        entity: sensor.processor_use
        theme: gauge_theme
        severity:
          green: 0
          yellow: 50
          red: 85

      - type: gauge
        name: Memory
        unit: '%'
        entity: sensor.memory_use_percent
        theme: gauge_theme
        severity:
          green: 0
          yellow: 50
          red: 85
          
      - type: gauge
        name: Disk Use
        unit: '%'
        entity: sensor.disk_use_percent
        theme: gauge_theme
        severity:
          green: 0
          yellow: 50
          red: 85
          
    - type: horizontal-stack
      cards:
      - type: gauge
        name: CPU Temp
        unit: 'F'
        entity: sensor.cpu_temp
        theme: gauge_theme
        min: 100
        max: 120
        severity:
          green: 100
          yellow: 105
          red: 110
#8

My bad… had a typo in the theme file. Once I corrected, the colors are correct. Now just need to figure out how to get rid of the scroll bar on the right

#9

Thanks for this! Sorted my issue out too.

#10

Nice, that allowed me to create this one:

image