Lovelace Gauge card

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.

# 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

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

So what is the proper thread?

Have you searched “lovelace gauge card”?

Please, read here before posting.

This is valid for any forum.

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

1 Like

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

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

# 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

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

Thanks for this! Sorted my issue out too.

Nice, that allowed me to create this one:

image