Lovelace: Power usage card

Having my home filled up with zwave switches and dimmers that all provide energy sensors, I thought it would be nice to have a piechart that would provide insight in the realtime power usage.
Because I already hooked up my (DSMR) energy meter to homeassistant, I could use the total amount of energy consumed as a 100% value so that I can display an ‘unkown’ part in the pie chart.
Here’s the result.

Things that can be improved:

  • Rendering speed: sometimes it takes a second to display the pie chart. I’m not a front-end guy and don’t know why this takes longer sometimes. Maybe something with the shadow-DOM in relation with the graph-js code. Suggestions are welcome!

You can install the card from HACS and follow instructions on my github.


  1. Add plugin .js as a module:
- url: /local/lovelace-graph-card.js
  type: module
  1. Add lovelace card to view:
- type: "custom:power-usage-card"                  # Mandatory
  title: "Actueel stroomverbruik"                  # Optional customized title
  total_power_usage: sensor.power_consumption      # Optional total power consumption (DSMR) sensor.
                                                   # If available then other measured values will be 
                                                   # substracted from total to calculate 'unknown' value.
  unknownText: "Onbekend"                          # Optional customized unknown text. Only applicable
                                                   # with total_power_usage option enabled.
    - entity: sensor.dimmer_kitchen_power          # One or more entities providing Watt (W) measurements
      name: Keuken                                 # Optional customized name for entity
    - entity: sensor.dimmer_garage_power
      name: Garage
    - entity: sensor.wall_plug_livingroom_left
      name: Huiskamer links
    - entity: sensor.wall_plug_livingroom_tv
      name: Huiskamer TV

I’m not seeing this card in HACS… is it still available there somehow?

Good point :wink: you’ll have to manually add my GitHub as a plug-in repository under HACS -> settings.

Have been looking for such a card for ages. Thank you very much for creating it!

Just to check: is this card also able to show power consumption in past 24 hours (if I feed it KwH data)?

I guess that won’t work right now. What kind of sensors do you have that provide realtime kWh data?

I think it’s a good idea to create another view to show the current day or last 24 hour totals but I guess that will still be based on (k)W sensors, don’t you think?

Well… Not realtime, but I do have hourly, daily and monthly KwH sensors. Would be great to visualize them in a donut graph.

This is awesome, great job.

Is there any way to sort by largest consumption?

1 Like

Is anyone making this work? I get errors in frontend: Custom element doesn’t exist: power-usage-card.
I did change the text in resources from:

- url: /local/lovelace-graph-card.js
  type: module


- url: /local/lovelace-graph-card.js
  type: module
- url: /local/power-usage-card.js
  type: module

@cheelio: can you confirm this needs to be done?
Here is my code:

      - title: Power Distribution
          - entity: sensor.battery_power
            name: Battery
          - entity: sensor.grid_power
            name: Grid
          - entity: sensor.current_yield
            name: Yield
        type: 'custom:power-usage-card'

Also tried this:

      - title: Power Distribution
        total_power_usage: sensor.total_power
        unknownText: 'Unknown'
          - entity: sensor.battery_power
            name: Battery
          - entity: sensor.grid_power
            name: Grid
          - entity: sensor.current_yield
            name: Yield
        type: 'custom:power-usage-card'

No luck. This looks like bad code. Please confirm this works…

It works for me, but I do not see any colors. Am I missing something?

edit: And suddenly there is color!
Loading takes a long time indeed, maybe I get some time in the future to improve :slight_smile:

Some things that need improvement:

  • Colors change
  • The pie size increases/decreases on hover
  • Rounding of the “other” category to 1 decimal would be better

can you share how dit you manage to install?
hacs do not alow to add this repository, and like @monkey-house I did not mange it to setup manual. files seems different like in read me info.

Later edit.
in git hub page you will see another 2 forks. one of this is working to be added in hacs.

Would it be possible to remove dependency from power metering in this card, please? Ability to feed it with any raw data would make it wonderful pie chart graph, that people are begging for! I tried to to feed it with data about consumption of RAM on my ESXi server per VM and it kinda work, though colors are missing, but whole logic seems to work perfectly, including calculation of available memory!

Hmm… interesting… just switched from my work laptop (Windows 10 + Chrome) to my personal computer (Mac + Safari) and it works as expected:

Perhaps the only wish would be to be able to customize colors :slight_smile: Otherwise great work !!!

You’re likely looking for something like this card

1 Like

Thanks @firstof9! This is exactly what I was looking for!

1 Like

hey! ik found that card to work nice and cleen to! Now i have a problem with the colors not showing can this be the results of hass having the update? my card is white, when i use the power card i do get colors but only when I hover over the card. Any one have the same problem? i hav W10 and Chrome. and @mirekmal l did you manege to change color of the slices?

cheers Luuk

Same for me, though I have no time to investigate :frowning:

tnx for the reply! i wil try to have a look this weekend and se if i can find the problem but im not really a coder. I love the card to bad it is not used a lot in the hass community I wil give a update if i can fix it.

Okay I just worked on it for 4 hours but I think I’m too big a noob. I have read a lot and clicked through but adjusting small things does not work. I can’t go further thought at first it was due to the import of the chart.js but now I have no idea. hopefully someone else can find the problem. when I test with the power card I do have color when I hover above it.

I cleared the power-usage-card.js and then my colors load. I am now looking for color adjustment in general.

Why would my “Unknown” show up as “unavailable”? If I hover above it, it actually says “NaN”.

type: 'custom:power-usage-card'
title: Power Usage
total_power_usage: sensor.victron_current_power_usage
unknownText: Unknown
  - entity: sensor.kitchen_1_power
    name: Upright fridge
  - entity: sensor.ulink_plug_power
    name: Barfridge
  - entity: sensor.freezer_plug_power
    name: Freezer
  - entity: sensor.microwave_power
    name: Microwave
  - entity: sensor.kettle_plug_power
    name: Kettle
  - entity: sensor.dishwasher_power
    name: Dishwasher
  - entity: sensor.washing_machine_power
    name: Washing machine
  - entity: sensor.oven_power
    name: Oven
  - entity: sensor.geyser_power
    name: Geyser
  - entity: sensor.bneta_plug_power
    name: Bneta plug
  - entity: sensor.pow2_power
    name: Eben laptop
  - entity: sensor.laptop_power
    name: ASUS Laptop
  - entity: sensor.borehole_power
    name: Borehole
  - entity: sensor.shelly_1pm_power
    name: TV
  - entity: sensor.back_yard_lights_power
    name: Backyard lights
  - entity: sensor.kitchen_light_power
    name: Kitchen lights
  - entity: sensor.dining_room_lights_power
    name: Dining room lights
  - entity: sensor.tv_room_lights_power
    name: TV Room lights

The sensor sensor.victron_current_power_usage is definitely numerical.

Screenshot 2020-07-06 at 00.17.26

Edit: Ok, actually when I plugged in the other missing device (“BNeta Plug”) the unknown started showing.