Electricity and solar panels into one single chart

Hi there!

I’d like to share this chart I’m using to understand the relationship between my solar panels, battery and electricity consumption. Took me a few hours to get it right, and I’m quite proud of the final result.

How to read it:

  • You can clearly see the PV production curve (light green + dark green + yellow area).
  • Light green means electricity production that got stored into my batteries.
  • Dark green means electricity sent back to the grid.
  • Yellow is electricity production that got actually used by the house
  • Orange is electricity usage from the batteries
  • Red is electricity usage from the grid.

I’m using GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more! card.

YAML code
- type: custom:plotly-graph
  defaults:
    entity:
      extend_to_present: true
      period: auto
      line:
        width: 0
  entities:
    - entity: sensor.grid_import_energy
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
        - store_var: grid_import
      internal: true

    - entity: sensor.battery_drain_energy
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
        - store_var: battery_import
      internal: true

    - entity: sensor.house_consumption
      name: Usage from PV
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
        - fn: |-
            ({ ys, xs, vars }) => {
              return {
                ys: ys.map( (v,idx) => v - vars.grid_import.ys[idx] - vars.battery_import.ys[idx])
              }
            }
      stackgroup: 1
      fillcolor: "#e0a21f"

    - entity: sensor.battery_store_energy
      name: Battery store
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
      stackgroup: 1
      fillcolor: "#36b336"

    - entity: sensor.grid_export_energy
      name: Back to grid
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
      stackgroup: 1
      fillcolor: "#1d621d"

    - entity: sensor.battery_drain_energy
      name: Battery usage
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
      stackgroup: 1
      fillcolor: "#e06f1f"

    - entity: sensor.grid_import_energy
      name: Grid usage
      filters:
        - resample: 5m
        - map_y_numbers: Math.round(Number(y))
      stackgroup: 1
      fillcolor: "#e03e1f"

  hours_to_show: 24
  refresh_interval: 10

I hope you find it useful. Feel free to suggest improvements and ask any question about how it works.

1 Like

Nice. I do a similar thing in Grafana but I invert the Solar export to make it obvious:

and I don’t have a battery (yet).

2 Likes