Energy Usage graph colour select or customisation option for stack

[groove200]

I've seen it asked on the forums, but doesn't look like the request ever made it here. It would be so much better if we had more control over the energy dashboard, especially the usage graph. I've nothing against blue, but it can get difficult to read if we want to add more trackers to this. (I know the individual is split out with different colours, but it is nice to be able to see in the stack the biggest contributor etc on a time frame) plus, colour blind people are going to have a really hard time distinguishing shades like this.

Feels strangely 'locked down' to the rest of the ecosystem.

https://community.home-assistant.io/t/energy-tab-more-colors-for-graphs/336089

[jmcollin78]

I have a small variation on colors but I would rather prefer to have some friendly color for this dashboard on energy source:

Ideally colors should be defined at dashboard definition level :

[madmalkav]

Same problem here, not very easy to look at for my poor, tired eyes 😅

[dennis3484]

Not very easy to look at even when not tired 🥹

[bjornarfjelldal]

+1 on this! I have 25+ sources (monitoring each individual breaker) that fit better in this kind of stacked bar graph per hour instead of the "individual devices" list below it, because it gives richer hour-to-hour insights on consumption and also cost. Or a 2.0 version of energy monitoring and analysis - the Energy tab has a lot of potential. Thanks for your work :)

[mathieucarbou]

I would like some control too.. In France, there are several tarifs and here is my current display:

It is then very hard to distinguish in the bar chart

[mathieucarbou]

I've created an issue regarding the problem caused by the current implementation here: #15384
This feature request would solving the issue.

[john8329]

Some customization would fit nicely there in my opinion, Solaredge rightly puts the "imported energy" as red which means "bad thing happening" intuitively, it's easier to notice than blue. My only option at the moment is to build a custom graph for it to match the SE dashboard as closely as possible.

[karwosts]

You can already set the base colors of all the energy elements with a theme, these are the variables that can be used:

energy-battery-in-color
energy-battery-out-color
energy-gas-color
energy-grid-consumption-color
energy-grid-return-color
energy-non-fossil-color
energy-solar-color
energy-water-color

It is only the individual gradient elements which are not currently customizable. But if you just want to swap red to blue or something like that it is currently doable.

[karwosts]

#17527 Just got merged for the 2023.9 beta, it will allow applying theme colors for each individual sub-item in the energy usage chart stack.

I didn't get a chance to do this feature for all the other energy cards yet, but I will try to get that in for next month.

If anyone is going to be trying out the beta today, please give it a shot and let me know how it works!

[S474N]

Also waiting for water (I need to differentiate between hot and cold water by color).

[karwosts]

Water and gas colors is coming in the next PR (#17826)

[titom43]

Not sure to understand. How do you apply themes?

EDIT: I mean how do you choose the color for each power source? (what IDs to mention??)

[karwosts]

Looks like we're fully merged for the rest of the cards now for 2023.11.

Full list of variables added that can be set (replace 0 with the index number you want to modify):

--energy-grid-return-color-0
--energy-grid-consumption-color-0
--energy-battery-in-color-0
--energy-battery-out-color-0
--energy-solar-color-0
--energy-gas-color-0
--energy-water-color-0

[pvdeye]

please tell me the variable from individual?

[smarthomecircle]

Not sure to understand. How do you apply themes?

EDIT: I mean how do you choose the color for each power source? (what IDs to mention??)

@titom43 you can check my video here: https://www.youtube.com/watch?v=9c2XUjobVB8. I have shown how to do it for themes as well. Hope it helps

[titom43]

@smarthomecircle Thank you so much for your video. It was very clear. You saved my time mentioning that the colors are not yet applied to the legend...

[roumano]

energy-grid-consumption-color-5
as you have 7 source input, maybe need to add a energy-grid-consumption-color-6, can you try ?

[karwosts]

The black color bars should be fixed in a more recent version, you can use color names now instead of hex.

[ManuelKugelmann]

BTW: the devices take their colors from --graph-color-1 --graph-color-2 ...

[Chrismettal]

Thanks, wasn't able to find that info anywhere!

[pvdeye]

How i can change consumed battery color and consumed solar color?

[karwosts]

Believe the theme vars for consumed solar is --energy-solar-color, and for consumed battery is --energy-battery-out-color

[pvdeye]

no sorry energy-solar-color is only the color from inverter-solar-power but not the consumed solar power
The same on consumed battery out

[ManuelKugelmann]

Afaik the Energy Usage Graph does not show the full inverter solar power, but only the consumed part of it colored by energy-solar-color, the parts that are not consumed but put into the battery or grid are colored by energy-battery-in-color and energy-grid-return-color. Consumed grid energy is colored by energy-grid-consumption-color and consumed battery energy is energy-battery-out-color.

I have not yet tested how charging the battery with grid energy is displayed, but I would guess, that the grid energy is considered consumed.

All consumed energy is stacked above the 0-line, all energy that is either exported into the grid or put into the battery is below the 0-line. Thus the the total height of the stack represents the total energy throughput, the part above 0 consumption and the part below 0 is export and storage. Imho an nice way to put a lot of information into a single graph.

[jmcollin78]

Hello, does someone have the color customisation available on mobile device ?
It works fine for me in computer Chrome but not in the app Android nor IPad.

[pics195]

Bonjour
Il faut sélectionner le même thème sur votre application Android ou Ipad que sur votre PC. Je parle du thème général.

[jmcollin78]

Ah merci ! Oui ca marche, je ne pensais pas que c'était lié au device.

[madmalkav]

O see this has been marked as complete. Does that lean that editing config files will be the only way to modify those colors? No plans to provide a way to do it in the UI in the future?

[silamon]

I've reopened. It should be added to the UI, but that wasn't clear in the initial post and the selected answer.

[kkevindev]

I think a feature where you can edit these in the front-end would be a must have addition for color blind people.