home-assistant.io/source/_dashboards/gauge.markdown

type, title, sidebar_label, description, related

type	title	sidebar_label	description	related
card	Gauge card	Gauge	The gauge card is a basic card that allows visually seeing sensor data.	docs title /integrations/frontend/ Themes docs title /dashboards/cards/ Dashboard cards

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

Screenshot of the gauge card.

Screenshot of the gauge card in needle mode.

{% include dashboard/edit_dashboard.md %}

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 %} type: required: true description: "gauge" type: string entity: required: true description: Entity ID to show. type: string name: required: false description: Name of gauge entity. type: string default: Entity name unit: required: false description: Unit of measurement given to data. type: string default: Unit of measurement given by entity theme: required: false description: Override the used theme for this card with any loaded theme. For more information about themes, see the frontend documentation. type: string min: required: false description: Minimum value for graph. type: integer default: 0 max: required: false description: Maximum value for graph. type: integer default: 100 needle: required: false description: Show the gauge as a needle gauge. Required to be set to true, if using segments. type: boolean default: false severity: required: false description: Allows setting of colors for different numbers. type: map keys: green: required: true description: Value from which to start green color. type: integer yellow: required: true description: Value from which to start yellow color. type: integer red: required: true description: Value from which to start red color. type: integer segments: required: false description: List of colors and their corresponding start values. Segments will override the severity settings. Needle required to be true. type: list keys: from: required: true description: Value from which to start the color. type: integer color: required: true description: Color of the segment, may be any CSS color declaration like "red", "#0000FF" or "rgb(255, 120, 0)". type: string label: required: false description: Label of the segment. This will be shown instead of the value. type: string tap_action: required: false description: Action taken on card tap. See action documentation. type: map hold_action: required: false description: Action taken on card tap and hold. See action documentation. type: map double_tap_action: required: false description: Action taken on card double tap. See action documentation. type: map
{% endconfiguration %}

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.

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.

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)