Current power usage card

Share your Projects! Dashboards & Frontend
1

In addition to the historical stats shown on the Energy dashboard, I wanted a way to visualize the real-time usage of monitored devices. This is useful when coming up with auto-off automations, or understanding how devices behave. I also wanted a “remainder” value, showing the un-monitored consumption, to help decide what new devices or circuits to add monitoring to.

I managed to do this entirely using the apexcharts-card, without any additional computed values. The total home power usage (in my case provided by the Tesla integration) is added as a hidden series, with a formatter function to subtract the sum of all other devices’ usage from it. Hovering over a segment shows the device name and usage in the middle. Here’s what it looks like, and the YAML:

Power Usage Card
Power Usage Card994×784 70.2 KB 

type: custom:apexcharts-card
chart_type: donut
update_interval: 10s
header:
  show: false
apex_config:
  legend:
    show: false
  tooltip:
    enabled: false
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          value:
            formatter: EVAL: (val) => `${val} W`
          total:
            show: true
            label: Known | Unknown
            formatter: |
              EVAL: function(opt) {
                const series = opt.config.series;
                const total = series.shift() * 1000;
                const known = Math.round(series.reduce((a, b) => a + b));
                return `${known} W | ${total - known} W`;
              }
series:
  - entity: sensor.powerwall_load_now
    show:
      hidden_by_default: true
  - entity: ...
4 Likes
2

Hi, this is awesome.

I can’t get the total value to be hidden. Did I miss something?

test_–_Home_Assistant
test_–_Home_Assistant958×762 73.5 KB 

type: custom:apexcharts-card
experimental:  
  hidden_by_default: true
chart_type: donut
update_interval: 10s
header:  
  show: false
apex_config:
  legend:    
    show: false  
  tooltip:    
    enabled: false  
  plotOptions:    
    pie:     
       donut:
          labels:
            show: true
            value:
               formatter: |
                 EVAL: (val) => `${val} W`
            total:
              show: true
              label: Bekannt | Unbekannt
              formatter: |
                EVAL: function(opt) {
                  const series = opt.config.series;
                  const total = series.shift();
                  const known = Math.round(series.reduce((a, b) => a + b));
                  return `${known} W | ${total - known} W`;
                }
series:
    - entity: sensor.strom_aktuell
      name: Strom Gesammt
      show:
        hidden_by_default: true
    - entity: sensor.fibaro_2_watt
      name: Kuehlschrank
    - entity: sensor.pool_power
      name: Pool
    - entity: sensor.fibaro_5_watt
      name: 3D Drucker
    - entity: sensor.greenwave_3_watt
      name: Gartenpumpe
    - entity: sensor.fibaro_4_watt
      name: Schreibtisch
    - entity: sensor.server_power
      name: Server
    - entity: sensor.greenwave_2_watt
      name: Trockner
    - entity: sensor.fibaro_3_watt
      name: TV Board
    - entity: sensor.fibaro_1_watt
      name: Waschmaschine
3

Hmm I don’t see anything wrong. What version of the apexcharts card do you have? What happens if you remove the name of that series?

4

Version 2.0.4

I also tried without the names. I tried it with the names because of the apex charts how-to for this feature “It only works if all the series have a unique name”

5

Hav you been able to fix it? Just saw this post and tried the card as well.
I have two issues:

  1. rounding, how to round the values in the middle of the circle, get more than 10 digits …
  2. the right have of the circle shows me always the total_power, which is then divided into section showing on the left side of the circle

Thanks - JJ