Lovelace: Power usage card

Hmm, im having the same issue where when the dashboard updates, all colors/text are lost from the graph. If i hover over it again, it comes back temporarily. Super odd. Anyone else having the issue?

NaN is computer talk for “Not a Number” your sensor might be reporting the value as a string. :man_shrugging:

This issue made me stop using the card :frowning:

I’m also getting this problem over and over again. I might remove it and give something else a go, even though I do find it quite useful.

I kind of rewrote the card for my particular usage, but got the color issue to go away (has to do with hass object state refreshes) and did some other customizations:



If you’d be kind enough to post a fixed version of the card that’d be amazing :slight_smile:

Looks good! Any chance you’ll share?

I really do love the idea and the card!

Here is my custom version (i even renamed the card) that is specific to my use case as I wanted to plot data from my power company that is supplied directly from them (not using history from hass):

You can take lines 44-48 though and add them to the regular power usage card or pie chart card. If you are like me, you didnt need something that updated every time the hass object updates (my data updates maybe once a day at most), so that little ‘hack’ stops the card from running after its been loaded on the page for the first time. Probably a way to have it set more on a timer or whatever, but again, i kind of tweaked it for my particular need. Hope it helps others though!

1 Like

Say I do want it refreshing all the time, does this fix the color issue still?

Hi all,

I’m quite new with HA, and adding some plugins.
Where should I add this:

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

ON my HA, the script seems to be located in : .homeassistant/www/community/power-usage-card

Should I change path in above configuration?

Concerning the card, what is the best way to add the configuration? in a yaml file or in the online editor?

Ok, I found some information:


So, In lovelace ressources, I can see and line with
/hacsfiles/power-usage-card/power-usage-card.js Module Javascript

So, I assume that installing the module with HACS makes it automatically available.

But, when I try to add manually a card in lovelace, with the online editor, when I add:
type: 'custom:power-usage-card'

I get the message :

Custom element doesn't exist: power-usage-card.

type: 'custom:power-usage-card'

EDIT : I switched to yaml mode for lovelace, and now it’s ok

Try use this way:

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'

That is exactly what I am looking for,

What do you mean (line in the js code?)?
Thank you

Ok I did it, add workaround from MACscr in pie-chart-card.js, seems to works well (I don’t need update every time), and some other little tweaks like define pie instead doughnut and scheme color.

More compact like this

Can you share your code?


If I install your version I get:

Chart.bundle.min.js?module:7 Uncaught Error: "undefined" is not a chart type.
    at tn.buildOrUpdateControllers (Chart.bundle.min.js?module:7)
    at tn.update (Chart.bundle.min.js?module:7)
    at tn.construct (Chart.bundle.min.js?module:7)
    at new tn (Chart.bundle.min.js?module:7)
    at HTMLElement.set hass [as hass] (pie-chart-card.js:97)
    at HTMLElement.value (chunk.76c6271b07439f0dec52.js:2040)
    at HTMLElement.value (chunk.76c6271b07439f0dec52.js:2040)
    at HTMLElement.t.addEventListener.once (chunk.76c6271b07439f0dec52.js:2040)
    at i (app.924deda6.js:10297)
    at chunk.455e79b014618741a716.js:2837