Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
ludeeus Merge pull request #2 from Gaardsholt/master
Removed unused and duplicate variable
Latest commit c4b8c9f Jul 24, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE May 17, 2019 Create May 17, 2019
gauge-card.js Removed unused and duplicate variable Jul 24, 2019

Gauge card

A simple gauge implemented in CSS based on




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
red number Required Value from which to start red color
green number Required Value from which to start green color
amber number Required Value from which to start amber color


Using two with stack

- type: horizontal-stack
    - type: custom:gauge-card
      title: Temperature
      entity: sensor.random_temperature
      min: -20
      max: 35
    - type: custom:gauge-card
      title: Oil
      entity: sensor.my_oil_sensor
        red: 50
        green: 0
        amber: 40

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


You can’t perform that action at this time.