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. 
This issue made me stop using the card 
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:
2 Likes
If youâd be kind enough to post a fixed version of the card thatâd be amazing 
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): https://gist.github.com/MACscr/a2bbbdfe9c78c204a28e8496076b2449
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?
EDIT :
Ok, I found some information:
and
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'
entities:
- 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.
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