Energy tab - more colors for graphs

able to edit the color would be great I am running 3 whole building monitors one for the pump house one for the Garage and one for the main house plus a bunch of separate devices

1 Like

Well I have a different issue. I’m colorblind. It would be nice to choose a color for each device you add.
Now I have 3 grid consumptions: Energy daytime, Energy nighttime and Return Energy. Those 3 colors: blue, light blue and purple are almost identical to me. It would be great If I can choose a color when i add those devices in the confguration of Energy.

@Gratje Home Assistant has recently employed a developer to look at the user interface design and ease of access for all. If you open a discussion topic here: https://github.com/home-assistant/frontend/discussions it will be seen by the developer. They are very keen to hear information about these sorts of issues.

You can also chat with them directly on Discord here: https://discord.gg/KXshVBv5 It is a development channel so keep the discussion to the point.

Note: until an easier way is developed you can change these colours by adding the following lines to a theme and changing the colours that they are currently set to:

  energy-grid-consumption-color: "#488fc2"
  energy-grid-return-color: "#8353d1"
  energy-solar-color: "#ff9800"
  energy-non-fossil-color: "#0f9d58"
  energy-battery-out-color: "#4db6ac"
  energy-battery-in-color: "#f06292"
  energy-gas-color: "#8E021b"

You can then use the reload themes service in Developer tools / services to apply your changes.

3 Likes

I am tryign to change my sources because we have a complex energy tier rate here. I’m trying to look at energy usage based on the tiers so I have multiple sources setup per the tariff examples shown in utility meter. How do I change source color?

#  themes:
#    basic:
#      modes:
#        dark:
#          energy-sources:
#            energy_home peak-color: "#ff9800"
#            energy_home_midpeak: "#486ac2"

I commented it out for now but this is basically what I’ve been trying to figure out.

It would be really nice if we could assign a customer color to each individual source. I use the energy monitor the same way as @Gutek, being able to see individual device consumption on an hourly level is super useful to me.

1 Like

Hello
Did you figure it out ?

In French we have the TEMPO energy offer which add 6 energy sensors (peak / off peak and BLUE/WHITE/RED days).
I would love to set the Blue color to the BLUE days, etc.

4 Likes

yes the gradient color is too similar when we add 6 energy sensor.

A feature request has been posted on the github frontend repository.
Make sure to upvote :slight_smile:

@tom_l Hi, I have recently started using HA. Still a compleet noop :grin: Anyway, i’m trying to put your yaml code about changing the colors to my liking. But I just can’t find out what or where or how to ad this code?

energy-grid-consumption-color: "#941515"
energy-grid-return-color: "#285c07" 

I’m using Mushroom as my default theme. And I want to change the colors of the ‘Net consumed from the grid’ gauge. Please can you help me.?

Thanks in advance. Charly.

I tried to create a template sensor to add the energy from a couple of Mill wall heaters, but the result does not display correctly. Any suggestions about what I’m doing wrong is greatly appreciated!

Here is the template:

template:
  - sensor:
    - name: "Total Mill Energy"
      unique_id: sensor.total_mill_energy
      state: "{{ (states('sensor.br_heater_day_consumption') | float + states('sensor.gr_heater_day_consumption') | float ) | round(2) }}"
      unit_of_measurement: "kWh"
      state_class: measurement
      device_class: energy
      attributes:         
        last_reset: '1970-01-01T00:00:00+00:00'

The energy dashboard shows no data:

But if I create a History Graph on a regular dashboard, there does seem to be a sum() of the heater_day_consumption. But this is not a useful graph, because it’s state_class: total_increasing

Screenshot 2023-01-15 at 19.26.30|690x337

A statistics graph does show me what I want to see with stat_types: change, however it only displays the data with a single heat sensor. When I try to use my template, again I see no data :frowning:

Screenshot 2023-01-15 at 19.30.15|532x500

Sorry can’t include more than 1 screen shot because I am a new user :face_with_raised_eyebrow:

template:
  - sensor:
      - name: "Total Mill Energy"
        unique_id: sensor.total_mill_energy
        state: "{{ (states('sensor.br_heater_day_consumption') | float(0) + states('sensor.gr_heater_day_consumption') | float(0)) | round(2) }}"
        availability: "{{ states('sensor.br_heater_day_consumption') | is_number and states('sensor.gr_heater_day_consumption') | is_number }}"
        unit_of_measurement: "kWh"
        state_class: total_increasing
        device_class: energy

You had an incorrect state class for an energy sensor to be displayed on the energy dashboard.

The last reset attribute is not required.

You should include defaults for functions and filters (like float).

The availability template will prevent odd readings if a sensor is unavailable (or if both are).

1 Like

This is now working for me!
Big thanks for the additional tips and the quick response!

1 Like

Hi
In comparative mode, with custom templates. Old color data are black…
My data are OK. I have no problem with the default theme of HA.
An idea to force color on the old data in comparative mode
Exemple : compare this year to last year… Last year data are black

If the compare colors aren’t working, it’s because you’re using color names in your theme, you need to use #rrggbb hex style color definitions for the compare to work correctly, as it tries to append an alpha channel to the existing hex color, which doesn’t work for names.

Hi Tom,
I’ve tried both options in the card

type: energy-distribution
link_dashboard: false
energy-grid-consumption-color: '#ffffff'
energy-grid-return-color: '#ffc108'
energy-solar-color: '#ffc108'
energy-non-fossil-color: '#0f9d58'
energy-battery-out-color: '#46d27a'
energy-battery-in-color: '#2b7346'

and in themes.xml

th_gauge_1:
  info-color: "grey" #former blue
  success-color: "yellow" #green
  warning-color: "blue" #yellow
  error-color: "green" #red
  
energy-distribution:
  energy-grid-consumption-color: '#ffffff'
  energy-grid-return-color: '#ffc108'
  energy-solar-color: '#ffc108'
  energy-non-fossil-color: '#0f9d58'
  energy-battery-out-color: '#46d27a'
  energy-battery-in-color: '#2b7346'

but none of them are working. Any help ?

Did you end up finding a solution on where to add the code ?

These are definitely theme variables, not card options, so it needs to go in your themes configuration, either in your configuration.yaml or in a separate themes yaml, depending on how you have structured that.

Once you define a theme, remember you need restart or call frontend.reload_themes, and then select that theme from your user profile page.

I was after the theme method. It appears I can’t override default theme but have to create a custom theme just for energy dashboard… Is that right ?

Yes if you want to change colors of things via theme variables, you need to create a theme, and you have to select that theme instead of the default theme.

1 Like