Home Assistant

Gauge Card

The gauge card is a basic card that allows visually seeing sensor data.

Screenshot of the Gauge card Screenshot of the gauge card.

Screenshot of the Gauge card in needle mode Screenshot of the gauge card in needle mode.

To add the gauge card to your user interface:

  1. In the top right of the screen, select the three dots menu and then select Edit dashboard.
    • By editing the dashboard, you are taking over control of this dashboard. This means that it is no longer automatically updated when new dashboard elements become available. To continue, in the dialog, select Take control.
  2. In the bottom right corner, select the Add card button and select from the card picker.

All options for this card can be configured via the user interface.

YAML configuration

The following YAML options are available when you use YAML mode or just prefer to use YAML in the code editor in the UI.

Configuration Variables

Looking for your configuration file?
type string Required

gauge

entity string Required

Entity ID to show.

name string (Optional, default: Entity name)

Name of gauge entity.

unit string (Optional)

Unit of measurement given to data.

Default:

Unit of measurement given by entity

theme string (Optional)

Override the used theme for this card with any loaded theme. For more information about themes, see the frontend documentation.

min integer (Optional, default: 0)

Minimum value for graph.

max integer (Optional, default: 100)

Maximum value for graph.

needle boolean (Optional, default: false)

Show the gauge as a needle gauge. Required to be set to true, if using segments.

severity map (Optional)

Allows setting of colors for different numbers.

green integer Required

Value from which to start green color.

yellow integer Required

Value from which to start yellow color.

red integer Required

Value from which to start red color.

segments list (Optional)

List of colors and their corresponding start values. Segments will override the severity settings. Needle required to be true.

from integer Required

Value from which to start the color.

color string Required

Color of the segment, may be any CSS color declaration like “red”, “#0000FF” or “rgb(255, 120, 0)”.

label string (Optional)

Label of the segment. This will be shown instead of the value.

Examples

Title and unit of measurement:

type: gauge
name: CPU Usage
unit: '%'
entity: sensor.cpu_usage

Screenshot of the gauge card with custom title and unit of measurement Screenshot of the gauge card with custom title and unit of measurement.

Define the severity map:

type: gauge
name: With Severity
unit: '%'
entity: sensor.cpu_usage
severity:
  green: 0
  yellow: 45
  red: 85

Multiple segments:

Screenshot of the gauge card with multiple colored segments. Screenshot of the gauge card with multiple colored segments. 

type: gauge
entity: sensor.kitchen_humidity
needle: true
min: 20
max: 80
segments:
  - from: 0
    color: '#db4437'
  - from: 35
    color: '#ffa600'
  - from: 40
    color: '#43a047'
  - from: 60
    color: '#ffa600'
  - from: 65
    color: '#db4437'

CSS variables can be used (instead of CSS ‘#rrggbb’) for default gauge segment colors:

  • var(--success-color) for green color
  • var(--warning-color) for yellow color
  • var(--error-color) for red color
  • var(--info-color) for blue color

Therefore, the previous example can be defined also as:

type: gauge
entity: sensor.kitchen_humidity
needle: true
min: 20
max: 80
segments:
  - from: 0
    color: var(--error-color)
  - from: 35
    color: var(--warning-color)
  - from: 40
    color: var(--success-color)
  - from: 60
    color: var(--warning-color)
  - from: 65
    color: var(--error-color)