ha-tdv-bar

July 13, 2025 ยท View on GitHub

A Home Assistant lovelace card to display bar chart oriented to display power sensors

hacs_badge

Simple example card Simple example card

Installation

HACS

This card is available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box.

Alternative method

  1. Download ha-tdv-bar.js from the Releases page
  2. Upload to /www/tdv-bar-card/ha-tdv-bar.js (via Samba, File Editor, SSH, etc.)
  3. Visit the Resources page in your Home Assistant install and add /tdv-bar-card/ha-tdv-bar.js as a JavaScript Module. Open your Home Assistant instance and show your dashboard resources.
  4. Refresh your browser

Options

NameTypeRequirementDefaultDescription
typestringRequiredcustom:tdv-bar-card
titlestringOptionalOptional header title for the card
nameprioritynumberOptional0If no object name is specified, the device name or state name will be selected
0-Device
1-state
rangemaxnumberOptional2000Maximum range for all entities (if no individual setting is available)
histmodenumberOptional1Historical chart display mode
0-hide
1-show (this can be automatically overridden if the width of the widget is insufficient)
animationnumberOptional1Bar chart animation
0-disable
1-enable
allownegativescalenumberOptional0Show and allow the use of negative scale
0-disable
1-enable
trackingmodenumberOptional1Mouse tracking mode
0-disable
1-bar only
2-history
3-bar and history
4-all bars and history
trackingvaluestringOptionalmaxType of value to be tracked (min, avg, max)
scaletypestringOptionallog10Scale type (linear or log10 )
colorsobjectOptionalColors section See Colors
defaulticonstringOptionalmdi:powerDefault icon for all unassigned entity icon
entitiesobjectRequiredDisplayed entities. See Entities

Colors

NameTypeRequirementDescription
chart_bgstringOptionalChart background color
chartstringOptionalChart color
bar_bgstringOptionalBar background color
barstringOptionalBar color
framestringOptionalChart and bar frame color
fontcolorstringOptionalThe color of the entity name and data

Entities

NameTypeRequirementDescription
entitystringRequiredEntity id of the sensor
iconstringOptionalIcon for this entity
namestringOptionalCustom label for this entity
statestringOptionalChange state entity id (e.g. switch)
barcolorstringOptionalIndividual bar color
rangemaxnumberOptionalMaximum bar scale range

Video example

Example

type: custom:tdv-bar-card
title: Energy consumers
scaletype: log10
rangemax: 2500
histmode: 1
trackingmode: 3
trackingvalue: max
allownegativescale: 0
animation: 1
entities:
  - entity: sensor.energomonitor_power
    barcolor: "#008000"
    icon: mdi:power-standby
    name: Total consumption
  - entity: sensor.energomonitor_fridge_power
    icon: mdi:fridge
    name: Fridge
  - entity: sensor.iot_power
    state: switch.iot_power
    icon: mdi:zigbee
    name: IOT devices
  - entity: sensor.ups_power
    state: switch.ups