A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CSS.
Adapted from https://github.com/custom-cards/gauge-card.
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 |
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