Gauge card

A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CSS.

Adapted from https://github.com/custom-cards/gauge-card.

Options

Name	Type	Default	Description
type	string	Required	custom:gauge-card
title	string	optional	Name to display on card
measurement	string	optional	If not set, uses the unit_of_measurement on the entity
entity	string	Required	sensor.my_temperature
attribute	string	optional	If set, this attribute of the entity is used, instead of its state
min	number	0	Minimum value for graph
max	number	100	Maximum value for graph
scale	string	'50px'	Base value for graph visual size
severity	object	optional	Severity object. See below

Severity object

Name	Type	Default	Description
style	number	Required	a colour name / number (see examples)
value	number	Required	Value from which to start specified color

Examples

Ready for pasting into the UI Manual card

Using many different colour specifications and levels

type: 'custom:gauge-card'
title: Custom gauge
entity: sensor.airq_index
measurement: 'idx'
severity:
  - style: 'rgb(255,12,12)'
    value: 10
  - style: orange
    value: 20
  - style: '#ffff00'
    value: 30
  - style: var(--my-green)
    value: 40
  - style: blue
    value: 50
  - style: indigo
    value: 60
  - style: violet
    value: 70
  - style: pink
    value: 80
  - style: cyan
    value: 90
  - style: white
    value: 100

Simple one

type: custom:gauge-card
entity: sensor.my_oil_sensor
scale: 100px

Using an attribute

type: custom:gauge-card
entity: climate.living_room
attribute: current_temperature

Using an attribute with dot notation

type: custom:gauge-card
entity: climate.living_room.current_temperature

Credits

• @ciotlosm
• @isabellaalstrom