Gauge card

The gauge card shows one value within a known range, like a humidity, a battery level, or the load of a server. The dial tells people where the value sits in that range at a glance, and the number in the middle tells them exactly.

Use it when the position in the range matters. For a value that has no natural minimum and maximum, like the power a device uses, the dial says little, and the sensor card or a tile card fits better. For a trend over time, use the history graph card.

The dial itself is the gauge component, which other places in the interface use too.

The scale runs from min to max, by default 0 to 100. That fits percentages. For anything else, set a range that matches the values people expect, like 10 to 30 for an indoor temperature. A value outside the range still shows as a number, the dial stays at its end.

The dial color can say whether the value is good or bad. With severity, you set where green, yellow, and red start. Each color runs from its value up to the next one. Without severity, the dial uses the info color, which carries no meaning.

Green doesn't have to be at the low end. For a battery or the moisture of a plant, low is bad, so red comes first.

For more than three ranges, or other colors, use segments instead: a list of ranges, each with a from value and a color. When both are set, segments wins.

With needle: true, the dial shows all the ranges at once, and a needle points at the value. People see where the value is, and how close it is to the next range. Use it with severity or segments, without them the whole dial has a single color.

A segment can have a label. With the needle, the label replaces the number in the middle when the value is in that segment, like Comfortable or Too warm.

• Pick the colors for what the value means to people, not for how high it is.
• Use theme colors, like var(--success-color), in segments. They work in the light and the dark theme.
• The name sits under the dial. Keep it short, the card is often placed next to another one.

• entity (string, required): the entity to show. Its state, or the attribute, has to be numeric.
• attribute (string): shows this attribute of the entity instead of its state.
• name (string): the name to show. Defaults to the name of the entity.
• unit (string): the unit to show. Defaults to the unit of the entity.
• min (number): the start of the scale. Defaults to 0.
• max (number): the end of the scale. Defaults to 100.
• severity (map): where green, yellow, and red start.
• segments (list): ranges, each with from, color, and an optional label. Takes the place of severity.
• needle (boolean): shows a needle on a dial with all the ranges. Defaults to false.
• theme (string): a theme for this card only.
• tap_action, hold_action, double_tap_action (action): what happens when you select, hold, or double tap the card. Selecting it opens the more-info dialog by default.

type: gauge
entity: sensor.monstera_moisture
severity:
  red: 0
  yellow: 15
  green: 25

The card lives in src/panels/lovelace/cards/hui-gauge-card.ts, and the element is <hui-gauge-card>. It wraps <ha-gauge>, from src/components/ha-gauge.ts. The card works out the color of the dial from the severity or the segments, and passes it as --gauge-color. With the needle, it passes them as levels instead.

The value is formatted by Home Assistant, the same way as everywhere else, so it gets the right precision and unit. A value that isn't a number shows a warning on the card instead of the dial.

In the sections view, the card takes the full width of a section by default.

Source